动态路由

在 Vue School 上观看免费视频课程

通常，通过 routes 选项将路由添加到路由器中，但在某些情况下，您可能希望在应用程序已运行时添加或删除路由。具有可扩展界面的应用程序（如 Vue CLI UI）可以使用此功能来扩展应用程序。

添加路由

动态路由主要通过两个函数实现：router.addRoute() 和 router.removeRoute()。它们**仅**注册新路由，这意味着如果新添加的路由与当前位置匹配，则需要使用 router.push() 或 router.replace()**手动导航**才能显示该新路由。让我们看一个例子

假设您有以下包含单个路由的路由器

const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/:articleName', component: Article }],
})

访问任何页面，例如 /about、/store 或 /3-tricks-to-improve-your-routing-code，最终都会渲染 Article 组件。如果我们位于 /about 上，并且添加了一个新路由

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

页面仍然会显示 Article 组件。我们需要手动调用 router.replace() 来更改当前位置并覆盖我们之前的位置（而不是推送新的条目，最终导致我们的历史记录中出现两次相同的位置）

router.addRoute({ path: '/about', component: About })
// we could also use this.$route or useRoute()
router.replace(router.currentRoute.value.fullPath)

请记住，如果您需要等待新路由显示，可以 await router.replace()。

在导航守卫中添加路由

如果您决定在导航守卫中添加或删除路由，则不应调用 router.replace()，而应通过返回新位置来触发重定向

router.beforeEach(to => {
  if (!hasNecessaryRoute(to)) {
    router.addRoute(generateRoute(to))
    // trigger a redirection
    return to.fullPath
  }
})

上面的示例假设两件事：首先，新添加的路由记录将与 to 位置匹配，从而有效地导致与我们尝试访问的位置不同的位置。其次，hasNecessaryRoute() 在添加新路由后返回 false，以避免无限重定向。

因为我们正在重定向，所以我们正在替换正在进行的导航，其行为与之前显示的示例相同。在现实世界场景中，添加更有可能发生在导航守卫之外，例如，当视图组件挂载时，它会注册新的路由。

删除路由

有几种不同的方法可以删除现有路由

• 通过添加具有冲突名称的路由。如果您添加的路由与现有路由具有相同的名称，它将先删除该路由，然后添加该路由

  router.addRoute({ path: '/about', name: 'about', component: About })
  // this will remove the previously added route because they have
  // the same name and names are unique across all routes
  router.addRoute({ path: '/other', name: 'about', component: Other })

• 通过调用 router.addRoute() 返回的回调

  const removeRoute = router.addRoute(routeRecord)
  removeRoute() // removes the route if it exists

  当路由没有名称时，这很有用

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

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

  请注意，如果您希望使用此功能但要避免名称冲突，可以在路由中使用 Symbol 作为名称。

每当删除路由时，**所有其别名和子路由**也会随之删除。

添加嵌套路由

要将嵌套路由添加到现有路由，可以将路由的名称作为第一个参数传递给 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 }],
})

查看现有路由

Vue Router 提供了两个函数来查看现有路由

• router.hasRoute()：检查路由是否存在。
• router.getRoutes()：获取包含所有路由记录的数组。