[Applet] Use uni-app para crear un entorno de applet --- configuración de enrutamiento y salto de página para obtener parámetros

Enrutamiento

uni-appEl marco administra completamente el enrutamiento. El desarrollador necesita configurar la ruta y el estilo de página de cada página de enrutamiento en pages.json , que no es compatible  Vue Router.

Ejemplo:

　　

    "páginas": [ // El primer elemento en la matriz de páginas representa la página de inicio de la aplicación, referencia: https://uniapp.dcloud.io/collocation/pages 
        {
             "ruta": "páginas / índice / índice" ,
             "estilo" : {
                 "navigationBarTitleText": "Home" 
            } 
        }, 
        {
             "ruta": "pages / courseCassify / index" ,
             "style" : {
                 "navigationBarTitleText": "Clasificación" 
            } 
        }, 
        {
             "ruta": "páginas / learnRecord / index " ,
             " estilo " :
                { "navigationBarTitleText": "Aprender" 
            } 
        },
        {
            "ruta": "páginas / mi / índice" ,
             "estilo" : {
                 "navigationBarTitleText": "我 的" 
            } 
        } 
    ],

 

Salto de enrutamiento

uni-app Hay dos métodos de salto de enrutamiento: saltar usando el componente del navegador y llamar al salto API .

 

<template> 
    <view> 
        <view class = "page-body"> 
            <view class = "btn-area"> 
                <navigator url = "navegar / navegar? título = navegar" hover-class = "navigator-hover"> 
                    < button type = "default"> 跳转 到 新 页面 </button> 
                </navigator> 
                <navigator url = "redirect / redirect? title = redirect" open-type = "redirect" hover-class = "other-navigator-hover "> 
                    <button type =" default "> 在 当前 页 打开 </button>
                </navigator> 
                <navigator url = "/ pages / tabBar / extUI / extUI"open-type = "switchTab" hover-class = "other-navigator-hover"> 
                    <button type = "default"> 跳转 tab 页面 </button> 
                </navigator> 
            </view> 
        </view> 
    </ view > 
</template>

 

// La página 
    navigation.vue acepta el parámetro de 
exportación predeterminado { onLoad: function (option) { // la opción es de tipo objeto y serializará los parámetros pasados ​​en la página anterior 
        console.log (option.id); // imprime la página anterior Los parámetros pasaron. 
        console.log (option.name); // Imprime los parámetros pasados ​​en la página anterior. 
    } 
}

 

Hay un límite en la longitud de la URL. Si la cadena es demasiado larga, no se podrá pasar. Puede utilizar la comunicación de formulario , variables globales u encodeURIComponentotros métodos para resolverla encodeURIComponent.

 

<navegador: url = "'/ páginas / navegar / navegar? elemento =' + encodeURIComponent (JSON.stringify (elemento))"> </navigator> // navegar.vue 页面 接受 
参数 onLoad: función (opción) { 
    elemento constante = JSON.parse (decodeURIComponent (option.item)); 
}

 

Atencion

• Para saltar a la página de la barra de pestañas, se debe establecer open-type = "switchTab"