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> -->