使用element配置动态路由的一些技巧

1.先手动配置json文件

文件内容

{
    "data": [
        {
            "id": 101,
            "authName": "用户管理",
            "path": "users",
            "children": [
                {
                    "id": 1,
                    "authName": "用户列表",
                    "path": "users",
                    "children": []
                },
                {
                    "id": 2,
                    "authName": "添加用户",
                    "path": "addusers",
                    "children": []
                }
            ]
        },
        {
            "id": 102,
            "authName": "分类管理",
            "path": "categories",
            "children": [
                {
                    "id": 1,
                    "authName": "分类列表",
                    "path": "categories",
                    "children": []
                },
                {
                    "id": 2,
                    "authName": "添加分类",
                    "path": "addcategories",
                    "children": []
                }
            ]
        },
        {
            "id": 103,
            "authName": "商品管理",
            "path": "goods",
            "children": [
                {
                    "id": 1,
                    "authName": "商品列表",
                    "path": "goods",
                    "children": []
                }
            ]
        }
    ],
    "meta": {
        "msg": "获取菜单列表成功",
        "status": 200
    }
}
复制代码

解决一些bug

• el-submenu index="1-1 表示把el-submenu当作是第一个导航的第一个子项-->
• :router="true 使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
• default-active="/index/users" -->
• :default-openeds 不可以直接使用['1'] 需要使用一个变量openList代替 因为值随时会变 如果写的
• 是['1'] 那么就永远不会改变 会出现点击二级菜单 一级菜单会缩起来的情况-->
• default-active="/index/users" 表示一进入页面就默认激活/index/user导航菜单
• default-active不能直接写死值路径要用变量代替 使用监听器 监听路由解决
• unique-opened 是否只保持一个子菜单的展开 boolean 默认是false

配置动态路由

  methods:{
    getNavList:function(){
      axios.get("/mock/menu.json",{
      
      })
      .then(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)
      })
    }
  }