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

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. confluence6.3.1升级最新版本(6.15.1)

    参考自官方文档:https://www.cwiki.us/display/CONFLUENCEWIKI/Upgrading+Confluence 1,confluence6.3.1安装部署 https ...

  2. [转]boost::python开发环境搭建

    转自:http://www.cnblogs.com/gaoxing/p/4317051.html 本来想用mingw编译boost::python模块,网上看了下资料太少,只有使用vs2012 操作环 ...

  3. 代码统计 (uustepcount)

    代码统计软件(uustepcount)用于 记录自己的代码数量,包括空行,代码行数,注释行数,注释百分比,代码百分比,文件大小,文件日期等. 虽然也是 分析程序的源代码,统计空行,注释行,代码行,但u ...

  4. 关于各种BUF源语的研究

    关于各种BUF源语的研究 资料来源: 单端信号需要用到的BUF 关于这些源语的约束: 增大驱动电流 关于管脚的上拉与下拉约束: ODDR的两种操作模式 关于ODDR输出时钟的应用 为什么ODDR需要这 ...

  5. Flask--(一对多)模型渲染表单数据

    模型建立一一对多模型: 多表添加外键,建立两张表之间的关系 一表关联多表的属性,可以方便快速访问多表的数据 模板一层循环渲染一表数据,二层循环渲染多表的数据 代码展示: from flask impo ...

  6. DokuWiki 命名空间管理

    为了更好的组织结构,Dokuwiki提供了命名空间这个功能,那怎么管理命名空间的,其实可以安装插件去管理 Add New Page Plugin:新建界面 https://www.dokuwiki.o ...

  7. Docker三大核心概念及DockerToolBox安装

    一.核心概念 Docker大部分操作都围绕三大概念——镜像.容器和仓库展开. 1.Docker镜像 Docker镜像类似于虚拟机镜像,可以将它理解为一个只读的模板.镜像是创建Docker容器的基础. ...

  8. C语言数据结构基础学习笔记——基础线性表

    线性表是指具有相同数据类型的n(n>=0)个数据元素的有限序列,它具有一个表头元素和一个表尾元素,并且每一个数据元素最多只有一个直接前驱和一个直接后继. 线性表的顺序存储也叫作顺序表,它的特性是 ...

  9. H5的本地存储技术及其与Cookie的比较

    第一部分: H5的本地存储技术 HTML5 提供了两种在客户端存储数据的新方法.先看下面的例子: 例1:var mySelection = {name:"car", amount: ...

  10. i++ 是线程安全的吗?

    相信很多中高级的 Java 面试者都遇到过这个问题,很多对这个不是很清楚的肯定是一脸蒙逼.内心肯定还在质疑,i++ 居然还有线程安全问题?只能说自己了解的不够多,自己的水平有限. 先来看下面的示例来验 ...