1.main.js文件中要先设置首个一级路由的childen才能实现redirect的默认的二级路由跳转,否则动态路由还没生成，默认的redirect 跳转会到空页面,所以后面实现动态路由时才会跳过首个一级路由进行循环.
2.当然如果此时不设置redirect，那就不用先设置任何子路由，后面实现动态路由直接循环一整个数组就可以
{
path: '/index',
name: 'index',
redirect:'/index/users',
component: () => import('@/views/IndexView.vue'),
children: [{
path: 'users',
name: 'users',
component: () => import('@/views/UsersView.vue'),
},{
path: 'addusers',
name: 'addusers',
component: () => import('@/views/AddusersView.vue'),
}]
}
组件内容
<el-container style="height: 100vh; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<!-- <el-menu :default-openeds="['1', '3']"> 表示默认展开第几个菜单 -->
default-openeds不可以直接写死值，需要由一个变量代替，否则会出现点击二级菜单，一级菜单又会缩起来
把router属性改成true才能实现点击跳转
default-active表示一进入就默认激活的导航栏
:unique-opened='true' 代表只会展开一个导航栏，默认为false
<el-menu
:default-openeds="openList"
:router="true"
:default-active="pagePath"
:unique-opened="true"
>
index接收的是字符串类型,(i+1)是数字类型,所以使用toString方法转成字符串,传给index
因为i是从0开始的 所以需要+1
<el-submenu
:index="(i + 1).toString()"
v-for="(v, i) in navList"
:key="i"
>
<template slot="title"
><i class="el-icon-menu"></i>{{ v.authName }}</template
>
<!-- <template slot="title">分组一</template> -->
el-menu-item index="1-1" 表示第一个导航里面的第一个子项
子选项需要改成: 1-1格式 以字符串的形式传给index属性 因为子选项也是一个数组所以需要再次循环
<el-menu-item
:index="'/index/' + item.path"
v-for="(item, index) in v.children"
:key="index"
>
{{ item.authName }}
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
export default {
data() {
return {
navList: [],
openList: ["1"],
pagePath: "/index/users",
};
},
created: function () {
this.getNaviList();
},
watch: {
当路由发生变化的时候，就把最新的地址给到pagePath变量,作用是为了保持路由菜单的高亮显示 以及解决点击不跳转的bug
$route: {
handler(newV) {
this.pagePath = newV.path;
},
immediate: true,
},
},
methods: {
getNaviList: function () {
axios
.get("/mork/menu.json", {
headers: {
Authorization: localStorage.token,
},
})
.then((res) => {
console.log(res);
let { data, meta } = res.data;
/* 数据获取成功 */
if (meta.status == 200) {
this.navList = data;
/* 动态添加路由菜单 */
let arr=this.navList.slice(1,3); 跳过首个一级路由
arr.forEach(v=>{
v.children.forEach(r=>{
this.$router.addRoute("index",{
path: r.path,
name: r.path,
component: () => import(`@/views/${r.path.substring(0,1).toUpperCase()+r.path.substring(1)}View.vue`),
}
);
})
})
} else {
/* 防止数据获取失败给出相应的后台提示 */
this.$message.error(meta.msg);
}
})
.catch((err) => {
console.log(err);
});
},
},
};
</script>
