🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
>[success] # addRoute 如根据用户不同的权限,注册不同的路由 时候往往使用添加路由方法 * 如果被添加路由和已存在路由重名,就会删除已存在路由并加入新路由 ~~~ router.addRoute({ name: 'home', path: '/home', component: () => import('@/view/Home.vue'), }) ~~~ * 为route添加一个children路由,那么可以传入对应的name,home 会成为about 子路由 ~~~ import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ routes: [ { name: 'about', path: '/about1', children: [ { name: 'home1', path: 'home1', component: () => import('@/view/Home.vue'), }, ], component: () => import( /* webpackChunkName: "about动态打包" */ '@/view/About.vue' ), }, ], history: createWebHistory(), // 开启history模式 }) router.addRoute('about', { name: 'home', path: 'home', component: () => import('@/view/Home.vue'), }) console.log(router.getRoutes()) export default router ~~~ >[success] # 动态删除路由 * 方式一:添加一个name相同的路由; ![](https://img.kancloud.cn/5a/d9/5ad9c881fccce02f565c5271a41d9f1a_721x84.png) * 方式二:通过removeRoute方法,传入路由的名称; ![](https://img.kancloud.cn/e8/13/e813fd04ac92c7089f9228a8142e4453_734x74.png) * 方式三:通过addRoute方法的返回值回调; ![](https://img.kancloud.cn/ea/a1/eaa14948d22522fac15ed97110490a16_572x63.png) >[success] # getRoutes * router.getRoutes():获取一个包含所有路由记录的数组 * 会将子路由展开 ![](https://img.kancloud.cn/9e/ef/9eef18bcb9f1ed39a5407c84141b0095_899x660.png) ![](https://img.kancloud.cn/61/39/613913220a06636ca31e13f185e3a97b_724x83.png) >[success] # router.getRoutes():获取一个包含所有路由记录的数组