vue新版router.addRoute基础用法

新版Vue Router中用router.addRoute来替代原有的router.addRoutes来动态添加路由、子路由

在添加子路由的时候

比如原现有路由

const routes = [
{
path: '/',
name: 'Login',
component: () => import(/* webpackChunkName: "about" */ '@/views/Login.vue')
},
{
path: '/index',
name: 'index',
meta: { title: '首页', noCache: true },
component: () => import(/* webpackChunkName: "about" */ '@/views/index.vue'),
children:[]
// children: [{
// path: '/test',
// name: 'test',
// component: () => import('../views/test.vue')
// }
// ]
}
]

想要在index下动态添加子路由test,特别要注意添加的子路由的path一定要把父路由的路径也带上

const routeObj = {
path: 'index/test', // 这里要把父路由的路径也带上
name: 'test',
meta: { title: '测试路由test', noCache: true },
component: () =>
import('../test/test.vue'),
}
this.$router.addRoute('index', routeObj)

vue动态路由实现原理 addRoute的更多相关文章

  1. vue动态路由

    我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.能够提供参数的路由即为动态路由第一步:定义组件 c ...

  2. vue——动态路由以及地址传参

    动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个”共用”的组件,并且还要传参数,渲染不同的数据 这就要用到动态路由跟路由传参了! 1 ...

  3. Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制

    思路: 动态路由实现:在导航守卫中判断用户是否有用户信息,通过调用接口,拿到后台根据用户角色生成的菜单树,格式化菜单树结构信息并递归生成层级路由表并使用Vuex保存,通过 router.addRout ...

  4. 18 vue 动态路由传参

    params形式 http://192.168.1.100:8080/#/infoDetailed/231 //定义路由{ path: "/infoDetailed/:newsId" ...

  5. Vue 动态路由传值

    一.动态路由传值 1.配置动态路由: const routes = [ //动态路由路径参数以:开头 { path: '/Content/:aid', component:Content}, ] 2. ...

  6. vue 动态路由 Get传值

    main.js //2.配置路由 注意:名字 const routes = [ { path: '/home', component: Home }, { path: '/news', compone ...

  7. vue动态路由配置,vue路由传参

    动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据 这就要用到动态路 ...

  8. Vue动态路由 Get传值

    <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> 我是首页组件 <ul> < ...

  9. vue动态路由传值以及get传值及编程式导航

    1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...

随机推荐

  1. Java9的模块化是什么

    Java9新特性中的模块化到底是什么 Java9中的一个重大特性是增加了一种新型的程序设计组件 - 模块. 官方对模块的定义为:一个被命名的,代码和数据的自描述集合.( the module, whi ...

  2. zk 节点宕机如何处理?

    Zookeeper 本身也是集群,推荐配置不少于 3 个服务器.Zookeeper 自身也要保 证当一个节点宕机时,其他节点会继续提供服务. 如果是一个 Follower 宕机,还有 2 台服务器提供 ...

  3. Nginx HTTP负载均衡和反向代理的配置与优化

    一.什么是负载均衡和反向代理 1.负载均衡 负载均衡是由多台服务器以对称的方式组成一个服务器集合,每台服务器具有等价的地位,都可以单独提供服务而无需其他服务的辅助.通过某种负载分担技术,将外部发送来的 ...

  4. CAS 的问题 ?

    1.CAS 容易造成 ABA 问题 一个线程 a 将数值改成了 b,接着又改成了 a,此时 CAS 认为是没有变化,其实 是已经变化过了,而这个问题的解决方案可以使用版本号标识,每操作一次 versi ...

  5. mysql问题排查与性能优化

     MySQL 问题排查都有哪些手段? 使用 show processlist 命令查看当前所有连接信息. 使用 explain 命令查询 SQL 语句执行计划. 开启慢查询日志,查看慢查询的 SQL. ...

  6. 对于 GC 方面,在使用 Elasticsearch 时要注意什么?

    1.SEE:https://elasticsearch.cn/article/32 2.倒排词典的索引需要常驻内存,无法 GC,需要监控 data node 上 segmentmemory 增长趋势. ...

  7. spring-boot 注解集合

    @Configuration 用于定义配置类,可替换XML配置文件,被注解的类内部包含一个或多个@Bean注解方法.可以被AnnotationConfigApplicationContext或者Ann ...

  8. springboot使用自定义注解和反射实现一个简单的支付

    优点: 未使用if else,就算以后增加支付类型,也不用改动之前代码 只需要新写一个支付类,给添加自定义注解@Pay 首先: 定义自定义注解 Pay 定义 CMBPay ICBCPay 两种支付 根 ...

  9. JQuery基础修炼-样式篇

    jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能.我们可 ...

  10. Codepen 每日精选(2018-4-16)

    按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以打开原始页面. 内容切换的交互效果https://codepen.io/jcoulterde... 报价卡片的交互效果ht ...