参照《着手摸手,带你用vue撸后台》一文,本人做了前端的权限判断

https://segmentfault.com/a/1190000009275424

首先就是在addroutes后,$router.options.routes不会更新。因为本人的侧面导航栏是使用$router.options.routes来遍历生成的。于是就发现这个问题。

作者估计这个是个bug,已经提交issuse:https://github.com/vuejs/vue-router/issues/1859

说一下解决方法:

1、在addroutes前,使用router.options.routes=XXXXX的方法手动添加

2、使用作者的方法,在store里维护一个routes对象,然后使用这个对象遍历生成侧面导航栏

补充一个作者没有说,但是源代码里做了的小细节:

这个系统再切换用户时,路由不会动态更新。所以需要在登出函数中加上location.reload();刷新浏览器。

在addroutes后,$router.options.routes没有更新的问题(手摸手,带你用vue撸后台 读后感)的更多相关文章

  1. [React] React Router: Nested Routes

    Since react-router routes are components, creating nested routes is as simple as making one route a ...

  2. [Angular2 Router] Auxiliary Routes bit by bit

    Article Github Auxiliary Routes is is little bit hard to understand. Here is demo, link You can see ...

  3. Vue搭建后台系统需要做的几点(持续更新中)

    前言 持续更新 一.UI框架 推荐 Elemnet ui 二.图表 vue-schart npm install vue-schart -S <template> <div id=& ...

  4. vue addRoutes路由动态加载

    需求:增加权限控制,实现不同角色显示不同的路由导航 思路:每次登陆后请求接口返回当前角色路由 核心方法:vue-router2.2.0的addRoutes方法 + vuex 以下是我实现的获取菜单路由 ...

  5. VueJs 权限管理

    程序运行时,router只配置登陆 首页404 等基本页面 import Main from '@/views/Main.vue'; // 不作为Main组件的子页面展示的页面单独写,如下 expor ...

  6. vue-router 动态添加 路由

    动态添加路由可以用了做权限管理.登录后服务器端返回权限菜单,前端动态添加路由  然后在设置菜单 1.vue-router 有方法router.addRoutes(routes) 动态添加更多的路由规则 ...

  7. Vuejs 实现权限管理

    程序运行时,router只配置登陆 首页404 等基本页面 import Main from '@/views/Main.vue'; // 不作为Main组件的子页面展示的页面单独写,如下 expor ...

  8. 【转】手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)

    前言 做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个vue的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不 ...

  9. 使用 vue-element-admin 动态路由渲染

    附上:vue-element-admin 官方文档 vue-element-admin https://panjiachen.github.io/vue-element-admin-site/zh/g ...

随机推荐

  1. Laravel 中通过自定义分页器分页方法实现伪静态分页链接以利于 SEO

    我们知道,Laravel 自带的分页器方法包含 simplePaginate 和 paginate 方法,一个返回不带页码的分页链接,另一个返回带页码的分页链接,但是这两种分页链接页码都是以带问号的动 ...

  2. 论文阅读笔记一:Tutorial on Gabor Filters

    时域下的一维Gabor滤波器: 可以将Gabor滤波器看作是两个输出两个相位的滤波器,分别在实数域和虚数域上. 实数域上滤波器为: 虚数域上滤波器为: 傅里叶变换为频域: 上述两个滤波器对频率敏感,为 ...

  3. 常见的User-Agent及免费代理IP网站

    常见的User-Agent 1.Android Mozilla/5.0 (Linux; Android 4.1.1; Nexus 7 Build/JRO03D) AppleWebKit/535.19 ...

  4. shell 处理文件脚本

    [root@centos-6 ~]# cat info_file.txt lys:28:shanxi zhy:28:shanxi [root@centos-6 ~]# cat info_file2.t ...

  5. 解决bootstrap多模态框跳转时页面左移问题

    衍生问题暂未发现.... 忽略左右跳动视觉差 解决方法: 在bootstrap的js搜索padding-right,然后找到“+this.scrollbarWidth”,删掉即可.

  6. Php7有哪些新特性:

    PHP7在PHP5的基础上又做了一次质的提升,当然改变很多,我这里以我的总结简单说下,主要发生了下面这些更改: 移除了一些旧的特性 ZEND引擎升级到Zend Engine 3,也就是所谓的PHP N ...

  7. Nginx中配置undertow进行两个项目的动静分离配置

    #user nobody; worker_processes ; pid /var/run/nginx.pid; events { worker_connections ; } http { incl ...

  8. VS2015 将*.xaml.cs文件包裹在*.xaml文件下

    原文:https://stackoverflow.com/questions/13387527/add-existing-xaml-files-to-visual-studio-2012 Right- ...

  9. jQuery字体缩放缩放插件zoomFontSize.js

    插件描述:jQuery字体缩放缩放插件zoomFontSize.js根据父类进行百分比缩放,兼容性如下: 使用方法 body 的class属性 添加 changbody_fontSize 而且整个页面 ...

  10. .NET Core在安装(VS2015)与部署

    .NET Core开发环境搭建 使用VS2015开发.NET Core项目,环境的搭建可以参考官网,大致安装步骤如下: 1.首先你得装个vs2015 并且保证已经升级至 update3及以上,下载链接 ...