【面试题】Vue2动态添加路由 router.addRoute()

Vue2动态添加路由

点击打开视频讲解更加详细

场景： 一般结合VueX和localstorage一起使用

router.addRoutes

vue-router4后 已废弃：使用 router.addRoute() 代替。
vue-router4版本前也可用

函数签名：

router.addRoutes(routes: Array<RouteConfig>)

动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

案例：

let routerObj = { path: '/about', name: 'about', component: () => import('../views/about.vue') }
router.addRoutes([routerObj])   //addRoutes在vue - router4里要被移除了 ，参数是数组

router.addRoute

添加一条新路由规则。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。

函数签名:

addRoute(route: RouteConfig): () => void

router.addRoute

添加一条新的路由规则记录作为现有路由的子路由。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。

函数签名:

addRoute(parentName: string, route: RouteConfig): () => void

案例：

let routerObj = { path: '/about', name: 'about', component: () => import('../views/about.vue') }
router.addRoute(routerObj)   //vue-router4版本后要使用addRoute，参数是对象

若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！！！