项目地址： 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/lo
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进行存储
