element页面渲染与跳转

:default-openeds="['1', '3']" 表示默认打开第一个和第三个菜单
1 对应了el-submenu index="1"
2 对应了el-submenu index="2"
el-submenu index="1-1 表示把el-submenu当作是第一个导航的
:router="true 使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

 <el-menu :default-openeds="['1']" :router="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>
          <!-- 子选项需要改成例如：1-1格式 以字符串的形式传给index属性 -->
          <!-- 因为子选项也是一个数组所以需要再次循环 -->
          <!-- :index="'/index/'+item.path" 路径最前面必须加上/ 否则会出现路径覆盖的问题 -->
          <el-menu-item :index="'/index/'+item.path" v-for="(item,index) in v.children" :key="index">{{item.authName}}</el-menu-item>
        </el-submenu>

script：

import axios from 'axios'
export default {
  data() {
    return {
      navList:[]
    };
  },
  created:function(){
    this.getNavList();
  },
  methods:{
    getNavList:function(){
      axios.get('url',{
        headers:{
          'Authorization':localStorage.token
        }
      })
      .then(res=>{
        console.log(res)
        let {data,meta} = res.data;
        /* 数据获取成功 */
        if(meta.status==200){
          this.navList = data;
        }else{
          /* 防止数据获取失败，给出相应的后台提示 */
          this.$message.error(meta.msg)
        }
      })
      .catch(err=>{
        console.log(err)
      })
    }
  }
};

配置路由：

{
    path: '/',
    name: 'login',
    component:() => import('../views/LoginView.vue')
  },
  {
    path: '/index',
    name: 'index',
    component:() => import('../views/IndexView.vue'),
    children:[{
      path: 'users',
      name: 'users',
      component:() => import('../views/UsersView.vue'),
    }