Vue Router之动态路由

前言

一般情况下，路由定义在 createRouter 中，而且创建路由之后不会去修改。但在某些场景可能需要在已经运行的时候动态的添加路由，比如菜单由接口返回，再比如类似低代码平台中用户可以新增或删除页面。

添加路由

添加路由，参数是路由对象

import { useRouter } from 'vue-router';
const router = useRouter();
router.addRoute({ path: '/about', component: About })

添加子路由，第一个参数是父级的 name，第二个参数是子路由对象

router.addRoute('admin', { path: 'settings', component: AdminSettings })

注：addRoute 只是添加路由，如果想添加后立即显示，则需要跳转。
注：添加路由会立即生效。

删除路由

• 添加一个 name 已有的路由，这样会删除原来的路由并添加新的。
• 调用 router.addRoute() 返回的回调，其返回值是个方法，可以直接调用。
• 调用 router.removeRoute()，参数传入 name。

判断路由是否已存在

传入 name，判断该路由是否存在。

router.hasRoute(name)

或

获取所有路由之后进行筛选

router.getRoutes()