学习笔记之vue根据权限动态添加路由

路由守卫判断

    router.beforeEach((to, from, next) => {if (to.path == '/login') {sessionStorage.removeItem('user');}if (!user && to.path !== '/login'&&location.search !== '?validate') {next({ path: '/login' })} else {next()}
})
复制代码

点击登陆后，用addRoutes实现动态路由

    this.$router.addRoutes([].concat(routers));
复制代码

之前通过$router.options.routes访问路由数据实现动态菜单，但这个数据不是响应式的，无法追踪动态路由的变化所以点击登录后的代码如下

    this.$router.options.routes = routers;this.$router.addRoutes([].concat(routers));
复制代码

addRoutes和Vuex一样都是刷新后数据会清空,刷新会导致Vue重新实例化，路由也恢复到了初始路由这个时候已经存储了登录信息，则在main.js里面根据已存储的登录信息设置路由

    let user = JSON.parse(sessionStorage.getItem('user'));const defaultRoutes =user && user.owner.type == 'area'?routes.city :user && user.owner.type == 'zlm'?routes.admin:user && user.owner.type == 'hotel'?routes.hotel:user && user.owner.type == 'hotel_group'?routes.group :routes.home;const router = new VueRouter({routes: defaultRoutes})复制代码

学习笔记之vue根据权限动态添加路由相关推荐

vue当中addRoutes动态添加路由白屏解决和next(),next(“/“)的一些区别
问题产生前言使用动态添加路由router.addRoutes()后进入一个页面,对着这一个页面刷新一下,然后页面就白屏了并且不管刷新多少次都没有用,依旧是白屏,只有重新进入页面才有效果比如对于网站 ...
vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式
工作中我们经常会遇到这种需求,后台定义用户的权限数据,前端进行获取,并渲染在侧边栏导航上,不同权限的用户看到的侧边栏是不同的.即前端渲染的数据是随着后台的改变而改变的,做到真正的前后端分离. 一.拿到 ...
我的Python学习笔记（四）：动态添加属性和方法
一.动态语言相关概念 1.1 动态语言在运行时代码可以根据某些条件改变自身结构可以在运行时引进新的函数.对象.甚至代码,可以删除已有的函数等其他结构上的变化常见的动态语言:Object-C.C# ...
addroutes刷新_vue 解决addRoutes动态添加路由后刷新失效问题
前言某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正. 应用场景:用 ...
Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...
LabView学习笔记（四）：动态数据类型
Labview学习笔记: LabView学习笔记(一):基础介绍 LabView学习笔记(二):滤波器实验 LabView学习笔记(三):基本控件 LabView学习笔记(四):动态数据类型 LabV ...
vue的动态路由（登录之后拿到动态路由通过addRouters()动态添加路由）
登录后我们拿到路由动态路由,后端传的数据可能为这个 {path: '/index',meta: {title: '首页',icon: 'icon-shouye',tab_index: 0, //给头部 ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...

学习笔记之vue根据权限动态添加路由

学习笔记之vue根据权限动态添加路由相关推荐

最新文章

热门文章