前文提到用户可以通过url访问到不属于自己权限的页面，这需要通过动态路由来解决
1.将后端返回的菜单数据存储到Cookie之后，调用状态管理中添加路由方法

//调用store中的setMenu函数this.$store.commit('setMenu',data.data.data)// 动态路由配置this.$store.commit('registerouter',this.$router)

//添加路由方法
//动态注册路由
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')