【面試題】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站一鍵三連哦!感謝支援!!!