Red de conocimiento informático - Problemas con los teléfonos móviles - enrutamiento dinámico vue

enrutamiento dinámico vue

lt;templategt;

lt;el-container style="altura: 100vh; borde: 1px sólido #eee"gt;

lt;el-aside width="200px" style="color-de fondo: rgb(238, 241, 246)"gt;

?lt;! -- ：default-openeds="['1', '3']" significa que el primer y tercer menú se abren de forma predeterminada--gt;

lt;!-- 1 corresponde a el- submenu index="1"

2 corresponde a el-submenu index="2" --gt;

lt;!-- el-submenu index="1-1? significa que el-submenu se considera el primer submenú de la primera navegación--gt;

?lt;!--?:router="true Usando el modo vue-router, cuando la navegación está activada, Habilitar este modo enrutará el índice como una ruta --gt;

?lt;!-- default-active="/index/users" --gt;

?- - No puedes usar ['1'] directamente. En su lugar, debes usar una variable openList, porque el valor puede cambiar en cualquier momento. Si escribes

es ['1'], entonces nunca lo hará. cambie y aparecerá así Situación: Al hacer clic en el menú secundario, el menú principal se reducirá - gt;

?lt;!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!! !-- Default-active="/index/users " significa que una vez que ingrese a la página, se activará el menú de navegación /index/user

Predeterminado -active no se puede escribir directamente como una ruta de valor muerto; debe reemplazarse por una variable Usar un oyente para escuchar las rutas para resolver --gt>

? - ¿Único-abierto? Si se debe conservar solo un submenú expandido El valor booleano predeterminado es falso --gt ;

?lt;el-menu

:default-openeds="openList"

:router="true"

: default-active="pagepath"

: único-abierto="true"

?lt ;

lt;! -- El tipo de cadena (i 1) recibido por index es un tipo numérico, así que use el método toString para convertirlo en una cadena. Pasar a index -- gt

lt;!-- Desde que i comienza; desde 0, por lo tanto, debe agregar 1 --gt

lt; el-submenu

?: index="(i 1).toString()"

? v -for="(v, i) in navList"

? El modo 3D está especialmente diseñado para pequeñas y medianas empresas y tiene un rendimiento de costos extremadamente alto. -- La subopción debe cambiarse, por ejemplo, al formato 1-1 y pasarse al atributo de índice en forma de cadena --gt;

? También es una matriz, es necesario repetirla nuevamente: gt

;

? lt;!-- :index="'/index/' item.path" La ruta debe tener el prefijo /; de lo contrario, se anulará la ruta: gt;

?lt;el-menu-item

: index="'/index/' item.path"

v-for="(item, index) en v.children "

：key="index"

gt;{{ item.authName }}lt;/el-menu-item

?gt;

lt;/el-submenugt;

lt;/el-menugt;

lt;/el-asidegt;

lt; el -containergt;

?lt;el-header style="text-align: right; font-size: 12px"gt;

lt;el-dropdowngt;

?lt;i class="el-icon-setting" style="margin-right: 15px"gt;lt;/igt;

?lt;el-dropdown-menu slot= " dropdown"gt;

lt;el-dropdown-itemgt;Ver lt;/el-dropdown-itemgt;

lt;el-dropdown-itemgt;add lt;/el - dropdown-itemgt;

lt;el-dropdown-itemgt;deletelt;/el-dropdown-itemgt;

?lt;/el-dropdown-menugt;

lt;/el-dropdowngt;

lt;spangt;Wang Xiaohult;/spangt;

?lt;/el-headergt;

? lt ;el-maingt;

lt;router-viewgt;lt;/router-viewgt;

lt;/el-maingt;

lt; / el-containergt;

?lt;/el-containergt;

lt;/templategt;

lt;scriptgt;

importar axios desde "axios";

exportar datos predeterminados {

? > devolver {

? navList: [],

* openList: ["1"],

* pagepath: "/index/usuarios",

};

?},

? watch: {

/* Cuando cambie la ruta, proporcione la última dirección la variable pagepath

Se utiliza para mantener la barra de menú de enrutamiento resaltada y resolver el error de no saltar cuando se hace clic */

$route: {

dler: función (newV) {

this.pagepath = newV.path;

?},

inmediato: verdadero,

?},

? creado: función () {

this.getNavList()

?},

* métodos: {

getNavList: función () {

* axios

.get("/mock/menu.json ", {

* encabezados: {

Autorización: localStorage.token,

?},

})

.then((res) =gt; {

? Let { data, meta } = res.data;

?/* Adquisición de datos exitosa*/

? if (meta.status == 200) {

this.navList = data;

/* Agregar rutas dinámicamente al menú*/

/* Dado que la primera ruta es la predeterminada, comenzamos a agregar dinámicamente desde la segunda ruta */

/* el segmento no cambia los datos originales, mientras que el segmento sí lo hace */

let arr = this.navList.slice(1) */

?navList.slice(1,3);

/* Recorre la matriz de enrutamiento y agrega rutas dinámicamente * /

arr.forEach(v =gt; {

?/* Intentamos usar v.children[0].path La razón de esto es que usamos subrutas para nombrar la ruta*/

?/* Si codificamos v.children[0].path, solo se agregará dinámicamente una ruta de subenrutamiento

?Si hay más más de uno, no funcionará, por lo que recorreremos v.children dos veces para poder agregar dinámicamente múltiples rutas secundarias de segundo nivel

v.children. forEach(r= gt; {

this.$router.addRoute("index", {

? ruta: r.path,

? nombre: r.path,

?/* Cambiar el nombre por el nombre de nuestra página, por ejemplo CategoryView.vue */

? /views/${r .path.substring(0, 1).toUpperCase() r.path.substring(1)}View.vue`),

}); > ?})

});

console.log(this.$router)

?} else {

/* Al proporcionar el mensaje de fondo adecuado para evitar errores en la recuperación de datos*/

this.$message.error(meta.msg);