动态加载菜单和路由(addRoutes)
vue-router 提供了 addRoutes() 方法，可以动态注册路由， 需要注意的是，动态添加路由是在路由表中 push 路由，由于路由是按顺序匹配的，因此需要将诸如404页面这样的路由放在动态添加的最后。
代码示例
// store.js
// 将需要动态注册的路由提取到vuex中
const dynamicRoutes = [
{
path: '/manage',
name: 'Manage',
meta: {
requireAuth: true
},
component: () => import('./views/Manage')
},
{
path: '/userCenter',
name: 'UserCenter',
meta: {
requireAuth: true
},
component: () => import('./views/UserCenter')
}
]
在 vuex 中添加 userRoutes 数组用于存储用户的定制菜单。在setUserInfo中根据后端返回的菜单生成用户的路由表。
// store.js
setUserInfo (state, userInfo) {
state.userInfo = userInfo
state.auth = true // 获取到用户信息的同时将auth标记为true，当然也可以直接判断userInfo
// 生成用户路由表
state.userRoutes = dynamicRoutes.filter(route => {
return userInfo.menus.some(menu => menu.name === route.name)
})
router.addRoutes(state.userRoutes) // 注册路由
}
修改菜单渲染
// App.vue
<div id="nav">
<router-link to="/">主页</router-link>
<router-link to="/login">登录</router-link>
<template v-for="(menu, index) of $store.state.userInfo.menus">
<router-link :to="{ name: menu.name }" :key="index">{{menu.title}}</router-link>
</template>
</div> |
|
收藏
淘帖
踩
