07 动态菜单栏vue解决v-for报错 [vue/valid-v-for]Custom elements in iteration require ‘v-bind:key‘ directives

1 左侧菜单栏静态数据改为动态数据

1 后台数据

<script>
export default {
  data() {
    return {
      menuList: [
        {
          name: "SysManga",
          title: "系统管理",
          icon: "el-icon-s-operation",
          path: "",
          component: "",
          children: [
            {
              name: "SysUser",
              title: "用户管理",
              icon: "el-icon-user",
              path: "/sys/users",
              children: [],
            },
            {
              name: "SysRole",
              title: "角色管理",
              icon: "el-icon-s-custom",
              path: "/sys/roles",
              children: [],
            },
            {
              name: "SysMenu",
              title: "菜单管理",
              icon: "el-icon-menu",
              path: "/sys/menus",
              children: [],
            },
          ],
        },
        {
          name: "SysTools",
          title: "系统工具",
          icon: "el-icon-s-tools",
          path: "",
          children: [
            {
              name: "SysDict",
              title: "数字字典",
              icon: "el-icon-s-order",
              path: "/sys/dicts",
              children: [],
            },
          ],
        },
      ],
    };
  },
};
</script>

2 遍历展示菜单

        <el-menu
          class="el-menu-vertical-demo"
        >
          <el-submenu
            default-active="Index"
            :index="menu.name"
            v-for="menu in menuList"
          >
            <template slot="title">
              <i :class="menu.icon"></i> <span>{{ menu.title }}</span>
            </template>
            <router-link :to="item.path" v-for="item in menu.children">
              <el-menu-item :index="item.name">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span slot="title">{{ item.title }}</span>
                </template>
              </el-menu-item>
            </router-link>
          </el-submenu>
        </el-menu>

【注意】 

 vscode中有这种报错

vue解决v-for报错 [vue/valid-v-for]Custom elements in iteration require ‘v-bind:key‘ directives

【原因】

这是因为我安装的enlint插件,它会对代码的规范进行检查。我这里用到v-for,但它是需要key值的,当不根据它的代码规范来执行的时候,自然而然就报错了。
【解决办法】

根据需求,不需要的话去掉eslint 中的代码规范检查即可。
找到 文件->首选项->设置 里面输入:vetur validation template ,把勾去掉即可。

再来看代码,已经不报红了

 看一下页面效果

现在点击用户管理,跳转了新路由,用户管理页面的路由未配置,所以页面没有任何显示

我们需要在router.js中添加用户管理页面的路由

{ 
    path: '/sys/users', 
    name: 'Index', 
    component: () => import('../views/sys/user/User.vue') 
}

配置好用户管理页面,再次点击用户管理,出现如下页面

 当然还是不尽如人意,因为我们的路由实际在后台已经获取到了,我们可以根据后台拿到的路由生成动态路由,而不是提前在router.js中配置好所有的路由,这样耦合度太高。

3 生成动态路由

先来观察动态菜单的数据

component对应的就是页面在项目中的编码位置

path就是路由地址

 所以我们在router.js中,先编写一个菜单转路由的方法

 

/* menu转route方法 */
const menuToRoute = (menu) => {
  if (!menu.component) {
    return null
  }
  // 复制属性  
  let route = {
    name: menu.name,
    path: menu.path,
    meta: {
      icon: menu.icon,
      title: menu.title
    }
  }
  // component = sys/user/User (对应的用户管理页面在哪里写着)
  route.component = () => import('@/views/' + menu.component + '.vue')
  return route
}

 我们需要达到这样的效果(点击菜单打开新的tab页)

 

 

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码

)">
< <上一篇
下一篇>>