参照《着手摸手，带你用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. AI-CBV写法

    AI-CBV写法 CBV固定样式 #url.py from django.conf.urls import url from django.contrib import admin from app0 ...

  2. CHENGDU1-Python编程语言和PEP8规范

    CHENGDU1-Python编程语言和PEP8规范 PEP8规范6条? 答:PEP8规范说白了就是一种规范,可以遵守,也可以不遵守,遵守PEP8可以让代码的可读性更高. 代码编排:---缩进,4个空 ...

  3. vue-cli watch简单用法

    创建一个vue单文件 <template> <div id="test"> <h4 @click="changeMsg()" id ...

  4. 外部引入的js 判断js脚本加载是否完成，完成后执行 相应的动作(以引入百度地图js为例)

    可以使用JQuery的 $.getScript(url,function(){});方法 $.getScript("http://api.map.baidu.com/getscript?v= ...

  5. 论文阅读笔记二十八：You Only Look Once: Unified,Real-Time Object Detection(YOLO v1 CVPR2015)

    论文源址:https://arxiv.org/abs/1506.02640 tensorflow代码:https://github.com/nilboy/tensorflow-yolo 摘要 该文提出 ...

  6. python面向对象三大特性-多态

    import abc #利用abc模块实现抽象类 class All_file(metaclass=abc.ABCMeta): all_type='file' @abc.abstractmethod ...

  7. sqlserver text类型字段错误 net.sourceforge.jtds.jdbc.ClobImpl@66fa192的解决方法

    1. SqlServer数据库中text/ntext字段,在用jtds1.2驱动时,会出现用getString()取不到值的问题,toString()也不行. 昨天查了下帮助可以通过简单的配置解决.即 ...

  8. paython3-练习

    在文本每行末尾加; f = open(r'D:\test1\1.txt','rb') w = open(r'D:\test1\2.txt','wb') for line in f.readlines( ...

  9. C#学习-面向对象

    封装:把客观事物封装成类,并将类内部的实现隐藏,以保证数据的完整性: 比如年龄赋值为负数,就是个例子.当我们把类的字段定义为公共类型时,外部对象可以直接对类内部的数据进行操作,此时无法对这些操作进行一 ...

  10. mysql 查询结果中增加序号

    ) as rownum,person_id from t_base_person