vue动态添加子路由

最新推荐文章于 2024-08-28 08:48:54 发布

大伦同志

最新推荐文章于 2024-08-28 08:48:54 发布

阅读量6.6k

点赞数 2

文章标签： vue javascript 前端

本文链接：https://blog.csdn.net/weixin_50235106/article/details/118212216

版权

本文详细介绍了在Vue中如何使用addRoutes API动态添加子路由。首先，通过路由树获取当前根路由和当前路由，然后声明pushRoute函数遍历并添加子路由。在pushRoute函数中，从根路由开始查找当前路由，并在其父路由的children数组中添加新的子路由。最后，调用addRoutes添加根路由，实现动态路由添加。注意，Vue会自动过滤已注册的路由，避免重复添加。

摘要由CSDN通过智能技术生成

前言

本篇文章介绍vue如何动态添加子路由。

动态添加子路由

动态添加子路由还是用addRoutes这个api来实现：addRoutes

实现步骤：

1、先通过路由树获取到当前根路由（routeBse）与当前路由（selfRoute）。

/**
* 路由树： this.$store.state.permission.routes 因为路由树是动态生成的我把它存在了vuex中
* api：$route.matched 一个数组，可以获取到父路由到当前路由的层级。matched
*/

const routeBase = this.$store.state.permission.routes.find(r => r.name === this.$route.matched[0].name)
const selfRoute = this.$route.matched[this.$route.matched.length - 1]

2、声明pushRoute函数，从根路由开始遍历找到当前路由，然后在当前路由的父路由.children.push需要添加的子路由。最后addRoutes[根路由]，就完事了。

/** pushRoute函数
* 参数：base 根路由
* 参数：baseFather 当前路由父路由
* 参数：route 需要添加的子路由
* 参数：self 当前路由
*/

const routeBase = this.$store.state.permission.routes.find(r => r.name === this.$route.matched[0].name)
const selfRoute = this.$route.matched[this.$route.matched.length - 1]

const route = {
    name: 'test',
    path: 'test',
    component: component
}


pushRoute(routeBase, null, route, selfRoute)
this.$router.addRoutes([routeBase])

// 将路由添加到当前路由的同级
function pushRoute(base, baseFather, route, self) {
  if (base.name === self.name) {
    if (baseFather.children.find(r => r.name === route.name)) { // 已存在路由不会重复添加
      return
    }
    // 添加
    baseFather.children.push(route)
  } else {
    if (base.children) {
      base.children.forEach(b => {
        // 递归调用
        pushRoute(b, base, route, self)
      })
    }
  }
}

注意：实际上addRoutes添加根路由并不会重复添加已存在的路由，vue底层会自动过滤已注册的路由并将warning输出到控制台上。