router路由index.js
基本路由（不受權限控制的）
export const routes = [
{
path: "/login",
component: ()=>import('../views/login/index.vue'),
meta:{title:'登陸頁'}
},
];
權限路由
export const perRouter = [
{
path: "/",
component: Layout,
redirect:'/advert',
roles:[],
children:[
{
path: "/advert",
component:()=>import('@/views/advert/advert.vue'),
meta:{title:'廣告管理',icon:'el-icon-c-scale-to-original'},
roles:['select:advert'],
},
]
}
]
const router = new VueRouter({
mode: "hash",
base: process.env.BASE_URL,
routes:routes,
});
export default router;
1.登陸成功后調用權限接口獲取當前賬號的權限，addRoutes添加路由
getPermossion().then(res=>{
localStorage.setItem('permission',JSON.stringify(res.result.list)) //存儲權限
let myRou = Permiss(res.result.list,perRouter,this.$router) //調用公共方法，判斷權限，addRoutes（最新的路由）
this.$router.push("/advert");
})
Permiss公共方法中要把menu菜單渲染的數據存到vuex中，因為router路由不是響應式數據，沒有觀察和訂閱，菜單就不會更新，
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
menu:[]
},
getters:{
menu:state=>state.menu
},
mutations:{
menuChange:(state,data)=>{
state.menu = data
}
}
})
菜單組件：
computed:{
getMenu(){
if(this.$store.state.menu){
return this.$store.state.menu[0].children
}
}
},
2.刷新頁面的時候再次調用公共方法，獲取最新權限路由，app.vue中的create函數或者路由中調用（因為刷新頁面的時候路由會重新實例化，之前添加的沒有了）
let promissList = JSON.parse(localStorage.getItem('permission'))
if(localStorage.getItem('permission')){
Permiss(promissList,perRouter,router)
}
3.退出登錄的時候要清除addRoutes添加的路由（location.reload()或者網上的跟換router.matcher方法）
遇到問題：登錄的時候把判斷后的路由存到了本地，刷新的時候取路由，頁面依舊空白，路由不能存到本地，組件會被轉換成字符串