vue路由权限管理

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import store from '@/store'

Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

const routes = [
  {path: '/',name: 'Home',component: Home,children:[]},
  {path:'*',component: () => import('../views/404.vue')},
]
// const list=[
//   {title:'路飞',path:'/lufei',component:'lufei'},
//   {title:'索隆',path:'/suolong',component:'suolong'},
//   {title:'山治',path:'/shanzhi',component:'shanzhi'},
// ]
const list=[
  {title:'路飞',path:'/lufei',component:'lufei'},
  {title:'索隆',path:'/suolong',component:'suolong'},
  {title:'山治',path:'/shanzhi',component:'shanzhi'},
  {title:'赤犬',path:'/chiquan',component:'chiquan'},
  {title:'黄猿',path:'/huangyuan',component:'huangyuan'},
  {title:'青雉',path:'/qingzhi',component:'qingzhi'},
]
store.dispatch("yibu",list)
console.log(store.state.list);
const router = new VueRouter({
  routes
})
store.state.list.forEach(i=>{
  routes[0].children.push({path: i.path,component: () => import('../views/'+i.component)})
  router.addRoutes(routes);
})

export default router

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    list:[]
  },
  mutations: {
    tongbu(state,data){
      state.list=data
    }
  },
  actions: {
    yibu({commit},data){
      commit("tongbu",data)
    }
  },
  modules: {
  }
})

// Home.vue
<template>
  <div>
    <div class="box">
      <div style="background:red">
        <div v-for="item,index of $store.state.list" :key="index">
          <div @click="$router.push({ path: item.path })">{{ item.title }}</div>
        </div>
      </div>
      <div style="background:blue">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.box {
  display: grid;
  grid-template-columns: 10% 90%;
  grid-template-rows: 1000px;
}
</style>