动态添加路由可以用了做权限管理。登录后服务器端返回权限菜单,前端动态添加路由  然后在设置菜单

1、vue-router 有方法router.addRoutes(routes) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

使用方法

this.$router.options.routes[0].children.push({//插入路由
name:'list',
path: 'list',
component: resolve => require(['../template/list.vue'], resolve)//将组件用require引进来
});
this.$router.addRoutes(this.$router.options.routes);//调用a

我的路由文件:

export default new Router({
routes: [
{
path: '/', component: index,
},
    {
      path: '/login',
      name: 'login',
      component: login
    } })

vue-router 动态添加 路由的更多相关文章

  1. Vue页面权限控制和动态添加路由

    原文转自:点我 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. Vu ...

  2. vue的动态路由(登录之后拿到动态路由通过addRouters()动态添加路由)

    登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...

  3. 【面试题】Vue2动态添加路由 router.addRoute()

    Vue2动态添加路由 点击打开视频讲解更加详细 场景: 一般结合VueX和localstorage一起使用 router.addRoutes vue-router4后 已废弃:使用 router.ad ...

  4. vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }

    之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, 于是 ...

  5. vue-element-admin登录逻辑,以及动态添加路由,显示侧边栏

    这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...

  6. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

  7. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

  8. 后盾网lavarel视频项目---vue实现动态添加和删除板块

    后盾网lavarel视频项目---vue实现动态添加和删除板块 一.总结 一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...

  9. vue动态添加路由addRoutes之不能将动态路由存入缓存

    在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道 ...

随机推荐

  1. c#中枚举类型 显示中文

    public enum AuditEnum { [Description("未送审")] Holding=0, [Description("审核中")] Aud ...

  2. Docker Images for MySQL Group Replication 5.7.14

    In this post, I will point you to Docker images for MySQL Group Replication testing. There is a new ...

  3. npm cnpm

    npm 1.说明: npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等) 2.使用npm安装插件:命令提示符执行npm ins ...

  4. Python递归解压缩多级.zip压缩包

    参考如下代码(from:https://stackoverflow.com/questions/36285502/how-to-extract-zip-file-recursively-in-pyth ...

  5. oracle12建立非C##用户并且导入数据

    由于要导入dmp文件,所以想建立和oracle11一样的用户,折腾了半天,记录一下过程: 1.进入sqlplus,建立用户和分配权限 cmd>sqlplus /nolog SQL>conn ...

  6. ubuntu安装nginx及其默认目录结构

    一. 安装包安装 1.1 安装Nginx $sudo apt-get install nginx Ubuntu安装之后的文件结构大致为: 所有的配置文件都在/etc/nginx下,并且每个虚拟主机已经 ...

  7. Java八大排序算法

    Java八大排序算法: package sort; import java.util.ArrayList; import java.util.Arrays; import java.util.List ...

  8. java 解耦

    探索目的:使用的时候,只需要一次调用就可以完成日常复杂的操作.而工具类的高耦合带来业务代码维护复杂度加大.以 java 的思想对原始工具加以改进. 有没有比这里尝试的方法更高明的,在 A_Utils. ...

  9. 一致性hash算法及java实现

    一致性hash算法是分布式中一个常用且好用的分片算法.或者数据库分库分表算法.现在的互联网服务架构中,为避免单点故障.提升处理效率.横向扩展等原因,分布式系统已经成为了居家旅行必备的部署模式,所以也产 ...

  10. ios7自定义返回按钮后,右滑返回功能失效解决方法

    -(void)viewWillAppear:(BOOL)animated{     [super viewWillAppear:animated];     //开启ios右滑返回     if ([ ...