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
二维码