2x8 - VueRouter - 进阶 - 动态路由

VueRouter 基础教程系列 🎉

简介

通常，我们的路由配置 (routes) 是在路由器被创建之前就已经静态配置好的的。现在，我们可以使用动态路由技术在路由程序运行时阶段动态的添加或删除路由配置项。

【动态路由技术应用的场景】（欢迎大家补充）

• 路由级权限校验
• 可扩展接口的应用程序，如 Vue CLI UI

【“动态路由相关 API”】

VueRouter 为了实现对路由配置项更灵活的编辑，从而提供了一套相对应的 API 集合：

• addRoute : 动态添加路由配置。
• removeRoute ：动态移除路由配置。
• hasRoute : 检查是否存在指定的路由。
• getRoutes ：返回当前已添加的所有路由配置项。

添加路由

动态添加路由配置项的场所主要有两处：

• 视图组件内。
• 导航守卫中。

不论是那种，都应该要在添加之前判断下是否已经存在了该路由配置项。

import { useRouter } from "vue-router";
//....

if (!router.hasRoute("Test")) {
  router.addRoute({
    name: "Test",
    path: "/test",
    component: import("@/views/Test.vue"),
  });
}

在路由守卫中要稍微注意一点，路由被添加后不应该使用 router.replace 方法进行手动导航，而是该借助守卫自身的返回值或者是 next 方法进行导航，因为在守卫中直接使用 push 或 replace 实际上会导致路由导航发生 cancelled 故障。

router.beforeEach((to) => {
  if (!router.hasRoute(to.fullPath)) {
    router.addRoute({
      name: to.name || to.fullPath.split('/').slice(-1).join(),
      path: to.fullPath,
      component: generateCom(to)
    })
    return to.fullPath
  }
})

添加多个命名冲突的路由，会发生覆盖机制。

删除路由

添加的命名路由可以直接删除。

router.removeRoute("Test");

非命名路由可以通过返回值进行删除。

const removeRoute = router.addRoute({path:'/test', component:Test});
removeRoute() // 删除路由如果存在的话

动态添加路由，更推荐使用命名路由。

添加嵌套路由

添加嵌套路由时 addRoute 方法将会接收两个参数，第一个参数是父路由的名称，第二个参数则是要添加的子路由配置对象。

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 }],
})

查看现有路由

import {useRouter} from 'vue-router';

const router = useRouter();
router.getRoutes(); //返回所有路由配置。