前文提到用户可以通过url访问到不属于自己权限的页面，这需要通过动态路由来解决
1.将后端返回的菜单数据存储到Cookie之后，调用状态管理中添加路由方法
//调用store中的setMenu函数
this.$store.commit('setMenu',data.data.data)
// 动态路由配置
this.$store.commit('registerouter',this.$router)
```prism language-java
//添加路由方法
//动态注册路由
registerouter(state, router) {
// 没有数据
if (!Cookie.get("menu"))
return;
//有数据
const menu = JSON.parse(Cookie.get("menu"))
state.menu = menu;
//动态组装路由
const menuArray = []
menu.forEach(item => {
if (item.children) {
//有子菜单
item.children = item.children.map(item => {
item.component = () =>
import (`../views/${
item.url}`)
return item
})
menuArray.push(...item.children)
} else {
//没有子菜单
item.component = () =>
import (`../views/${
item.url}`)
menuArray.push(item)
}
})
// console.log(menuArray, "menu")
//路由的动态添加
menuArray.forEach(item => {
router.addRoute('Main', item)
})
}
3.router下的index.js文件如下
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//创建路由组件
import Main from '../views/Main.vue'
import Login from '../views/Login.vue'
//将路由与组件进行映射
const routes = [
{
path: '/login',
name: 'login',
component: Login,
},
//主路由
{
path: '/',
component: Main,
name: 'Main',
redirect: '/home', //路径为 / 时，重定向到home
//子路由
children: []
}
]
//创建router实例
const router = new VueRouter({
routes
})
export default router
4.注意：此时虽然可以实现动态路由，但是刷新页面则会失效，在main.js文件中也需要调用添加路由方法
new Vue({
router, //将router挂载到vue实例上
store, //将store挂载到vue实例上
render: h => h(App),
created() {
store.commit('registerouter', router)
}
}).$mount('#app')
原文链接: https://blog.csdn.net/qq_53568730/article/details/138326290