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()

你可能感兴趣的:(vue-routervue3)