vue-实现路由权限(路由动态渲染)

一、layout/components/Sidebar/index.vue

computed:{
   
	routes() {
   
      return this.$store.state.routes;//原本是：this.$router.options.routes;
    }
}

二、store/index.js

const store = new Vuex.Store({
   
  state: {
   
    roles: ['admin'], //角色
    routes: []        //路由
  },
  mutations: {
   
    changeRoles(state, payload) {
   
      state.roles = payload;
    },
    changeRoutes(state, payload) {
   
      state.routes = payload;
    }
  },
  modules: {
   
    app,
    settings,
    user
  },
  getters
});

三、src/permission.js

import router from './router';
import store from './store';
import {
    asyncRoutes, constantRoutes } from '@/router';
import {
    filterAsyncRoutes } from '@/utils/asyncRouter.js';

router.beforeEach((to, from, next) =>