嵌套路由中动态添加子路由

最新推荐文章于 2023-11-10 16:41:12 发布

晟晟今天吃可爱多了没有

最新推荐文章于 2023-11-10 16:41:12 发布

阅读量450

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43638614/article/details/129127770

文章展示了如何在Vue.js应用中使用vue-router动态添加路由，并实现跳转至新路由页面。通过`this.$router.options.routes`获取当前路由，然后向指定路由的子路由数组添加新条目，接着使用`this.$router.matcher`更新路由匹配器，确保无重复名字。最后，使用`this.$router.push`进行路由跳转，并传递参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import Router from 'vue-router'

获取当前路由

let allRouter=this.$router.options.routes

      allRouter[8].children.push({
        path: '/detail/'+billNo,
        component: () => import('@/views/homepage/detail/index'),
        name: 'Detail'+billNo,
        hidden: true,
        meta: { title: '详情页('+billNo+')', icon: 'user', affix: true }
      })
      //替换以前的 router 保证名字不重复
      this.$router.matcher = new Router({ mode: "hash" }).matcher
      this.$router.addRoutes(allRouter)

跳转到新路由页面

      this.$router.push({
        path: '/detail/'+billNo,
        query: {
          billNo: billNo,
          shipCompany: shipCompany
        }
      })

参考
https://blog.csdn.net/weixin_44680009/article/details/120924575