web前端|js教程
vue,vuex,vue,router,路由权限,vue,路由权限
web前端-js教程项目地址： vue-simple-template
辅导 网站 源码,vscode 数据可视化,ubuntu修复raid,tomcat实现负载均衡,科研之友爬虫,php传输xml数据,浙江seo优化欢迎来电,免费php软件网站系统下载,织梦html5网络公司模板lzw
共三个角色：adan barbara carrie 密码全是：123456
400电话网站源码,vscode如何做成手机端,ubuntu 使用体验,tomcat中8009端口,涂山爬虫,php代码书写规范,天津什么是seo优化答疑解惑,网站安全暗链lzw
adan 拥有 最高权限A 他可以看到 red , yellow 和 blue 页面（共三个页面）
微信幻灯片源码,vscode 无法连接,ubuntu虚拟网络,tomcat日志清除,sqlite c v,服务器运行慢,腾讯通 通达oa 插件,哪个前端框架表格,爬虫防沉迷,php培训在哪里,seo排名不知是网站排名,网站的文章标题太短怎么弄,微信 网页看源码,网站首页模板下载,iframe 页面弹出框代码,会员管理系统网站源码,.net程序代码lzw
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.jpg├── 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 定义了roleexport const powerRouter =[ { path: /,redirect:/red, name: index,component: Index,hidden:false, children: [ { path: /red, name: ed, component: red,}, { path: /yellow, name: yellow, component: yellow, meta: {role: B}}, { path: /blue, name: lue, 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进行存储 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); }); },
gin.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([ ewrouter ])
此项目拿去 捋清楚 vue+vuex+vue-router 的关系是没问题的，这可以说的超级简单的版本，适合初学。上面的内容说的重点，其实也算是项目的全部啦
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在js中如何实现上传并压缩图片功能（详细教学）
使用JS如何计算两个时间相差数
在vue-cli webpack中如何引入jquery（详细教学）
在vue中有关文件使用方式
纯js如何生成下拉列表
