Vue-动态添加路由

最新推荐文章于 2024-09-17 15:26:36 发布

weixin_30788619

最新推荐文章于 2024-09-17 15:26:36 发布

阅读量2.2k

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5d1a1a4a6fb9a07ec63b2c90

版权

Vue-动态添加路由

最近项目中有个需求 - 需要动态添加页面以及路由。过程很煎熬。但是实现之后，再看一下流程、代码，其实发现并没有多少东西。

添加嵌套的子路由


const children = []

const routerData = [{
  // 一级路由
  path: '/constructionSystem',
  component: home,
  // 二级路由
  children: [{
    path: 'buildInfo',
    name: 'buildInfo',
    component: buildInfo,
    // 三级路由
    children
  }]
}]
// 后盾获取到数据， data
data.forEach((item, index) => {
    // 路由 name 用一个规则来动态添加（这里的 first_menu_id 是业务的某一个 ID）
    let routerName = 'common_' + item.first_menu_id
    let path = routerName
    children.push({
        path,
        name: routerName,
        // 指向的一个公共组件
        component: () => import(
        '@/views/.../configurationPage'
        )
     })
})

// 将新增路由添加；
this.$router.addRoutes(routerData)

复制代码

问题一

描述：

routerData 中的二级路由 name: 'buildInfo',在定义路由的时候，此时是已经存在的了。当添加的时候等于重复添加了路由。关于重复路由得问题，Vue-Router 自动给处理了。但是在开发环境还是会有 warning 警告的。
结果：

解决：

查了一下，可以用 Vue-Router 的 matcher 来解决。
代码如下：

// 在 router/index.js 中 将 addRouter 方法封装一下

router.$addRoutes = (params) => {
  router.matcher = new Router({
    mode: 'history',
    routes: router.options.routes
  }).matcher
  router.addRoutes(params)
}

复制代码

使用时：

this.$router.$addRouters(params)

问题二

描述：

第二个就是一个比较大的问题了。动态添加的路由，刷新页面后就消失了。

解决：

我现在的做法是，在全局导航守卫中监听，在动态添加路由得板块中时，路由变化就重新添加。做法跟上述添加路由得方式一样，就是再操作了一遍；


router.beforeEach((to, from, next) => {
    // 代码就不复制了,跟上面是一样的。
})

复制代码

反思

刚开始添加路由的时候，是通过路径直接添加的新增路由, path 拼接：

path: '/constructionSystem/buildInfo', 但是这样不能实现，必须得把一级、二级路由写上。自我感觉，拼接 path 是应该可以的，估计还有哪个点我没考虑到，由于赶项目也没有多尝试，等项目上线了，这块再好好搞一下。

另外一个就是刷新页面的时候动态添加的路由丢失，我的处理方法，用全局导航守卫显然是不合理的，因为只有在刷新的时候才会丢失，路由切换的时候没有必要去重新添加路由。放到 vuex 中是个好的实现方式。
在下个版本需求还有这个需求，会着重处理这两个地方。

结语

这个只是动态添加路由得实现，还要根据自己的业务需求来进一步处理。我的这个项目比较大。业务需求比较复杂，动态添加的路由要跟很多地方结合起来，好多坑都是没有想到的。也是第一次实现这样的功能，改进、优化的地方还有很多，会继续研究一下这块。

转载于:https://juejin.im/post/5d1a1a4a6fb9a07ec63b2c90