项目地址：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的暴露在外的getter字段

// ----  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'}}]}
];
复制代码

// ----  main.js  ----
router.beforeEach((to, from, next) => {if(store.getters.role){ //判断role 是否存在if(store.getters.newrouter.length !== 0){  next() //resolve 钩子}else{let newrouterif (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 = powerRouternewrouter[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 吧～ 谢谢

有什么问题欢迎提问～