摘要：可以配合相關的官方文檔學習。上面的內容說的重點，其實也算是項目的全部啦項目地址感覺還不錯的話就請給個吧謝謝有什么問題歡迎提問

項目地址：vue-simple-template
共三個角色：adan barbara carrie 密碼全是：123456

adan 擁有 最高權限A 他可以看到 red , yellow 和 blue 頁面（共三個頁面）
barbara 擁有 權限B 他可以看到 red 和 yellow 頁面
carrie 擁有 權限C 他可以看到 red 和 blue 頁面

webpack         ---- 打包神器
vue             ---- JavaScript 框架
vuex            ---- 實現不同組件間的狀態共享
vue-router      ---- 頁面路由
babel-polyfill  ---- 將ES6代碼轉為ES5代碼
normalize.css   ---- 重置掉該重置的樣式
element-ui      ---- UI組件庫

# cd 到項目文件夾
cd weven-simple-template
# 安裝依賴 （本項目還安裝了其他依賴詳情 請見 package.json 文件）
npm install
# 運行項目
npm run dev

vue-cil 腳手架初始化項目后，我只修改過src文件夾

src
├── App.vue         ---- 頁面入口
├── api             ---- api請求
│?? └── login.js    ---- 模擬json對象數據
├── assets          ---- 主題 字體等靜態資源
│?? └── logo.png
├── components      ---- 組件
│?? ├── index.vue
│?? └── login.vue 
├── main.js         ---- 初始化組件 加載路由
├── router          ---- 路由
│?? └── index.js
└── store           ---- vuex狀態管理
    ├── getters.js
    ├── index.js
    └── modules
        └── login.js

動態路由的關鍵在于router配置的meta字段和vuex的狀態共存

// ----  router/index.js  ----
// 初始化路由
export default new Router({  
  routes: [
    {
      path: "/login",
      name: "Login",
      component: Login
    }
  ]  
});
// 動態路由 meta 定義了role
export const powerRouter =[    
    { path: "/",redirect:"/red", name: "index",component: Index,hidden:false,
      children: [
        { path: "/red", name: "red", component: red,},
        { path: "/yellow", name: "yellow", component: yellow, meta: {role: "B"}},
        { path: "/blue", name: "blue", component: blue, meta: {role: "C"}}
      ]
    }
];

//----  store/modules/login.js  actions部分  ----
Logins({ commit }, info){
          return new Promise((resolve, reject) => {
              let data={};
              loginByUserInfo.map(function (item) { //獲取所以用戶信息
                  if(info.username === item.username || info.pew === item.pew){
                      commit("SET_USERNAME",item.username);  //將username和role進行存儲
                      sessionStorage.setItem("USERNAME", item.username); //存入 session 
                      commit("SET_ROLE",item.role);
                      sessionStorage.setItem("ROLE", item.role);
                      return data={username:item.username,introduce:item.introduce};
                  }else{
                      return data;
                  }
            });  
              resolve(data);
        }).catch(error => {
            reject(error);
        });
      },
      Roles({ commit }, newrouter){
        return new Promise((resolve, reject) => {
              commit("SET_NEWROUER",newrouter); //存儲最新路由
              resolve(newrouter);
        }).catch(error => {
            reject(error);
        });
      },

// ----  main.js  ----
router.beforeEach((to, from, next) => {
    if(store.getters.role){ //判斷role 是否存在
        
        if(store.getters.newrouter.length !== 0){  
               next() //resolve 鉤子
        }else{
            let newrouter
               if (store.getters.role == "A") {  //判斷權限
                newrouter = powerRouter
            } else {
                let newchildren = powerRouter[0].children.filter(route => {
                    if(route.meta){
                        if(route.meta.role == store.getters.role){
                            return true
                        }
                        return false
                    }else{
                        return true
                    }
                });
                newrouter = powerRouter
                newrouter[0].children = newchildren
            }
            router.addRoutes(newrouter) //添加動態路由
            store.dispatch("Roles",newrouter).then(res => { 
                next({ ...to })
            }).catch(() => {       

            })
        }      
    }else{
           if (["/login"].indexOf(to.path) !== -1) { 
           next()
        } else {
           next("/login")
        }
    }
})

// ----  components/index.vue  ----
// mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性

...mapGetters([
        "newrouter"
    ])
    

此項目拿去 捋清楚 vue+vuex+vue-router 的關系是沒問題的，這可以說的超級簡單的版本，適合初學。可以配合相關的官方文檔學習。上面的內容說的重點，其實也算是項目的全部啦

項目地址：vue-simple-template
感覺還不錯的話就請給個 star 吧～ 謝謝

有什么問題歡迎提問～