VUE框架：vue2转vue3全面细节总结（6）动态路由

大家好，我是csdn的博主：lqj_本人

这是我的个人博客主页：

 lqj_本人_python人工智能视觉（opencv）从入门到实战,前端,微信小程序-CSDN博客

最新的uniapp毕业设计专栏也放在下方了：

https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482

平时我也会在哔哩哔哩视频中讲解一些大家平时用得到的东西，

哔哩哔哩欢迎关注：

卢淼儿的个人空间-卢淼儿个人主页-哔哩哔哩视频

动态路由

添加路由

当我们做用户权限的时候，添加路由非常有用。可以使用 router.addRoute() 来添加一个路由：

router.addRoute({ path: '/about', name: 'about', component: About })

注意：跟之前版本不同的是，路由只能一个一个添加，不能批量添加。

删除路由

以下几个方法都可以删除路由：

1、通过使用 router.removeRoute() 按名称删除路由：

router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')

2、通过添加一个名称相同的路由，替换掉之前的路由：

router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })

3、通过调用 router.addRoute() 返回的回调函数：

const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话

当路由没有名称时，这种方法非常有用。

添加嵌套路由

要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数传递给 router.addRoute() ，这和通过 children 添加的效果一样：

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
// 添加嵌套路由
router.addRoute('admin', { path: 'settings', component: AdminSettings })

这相当于：

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }]
})