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站一鍵三連哦！感謝支持！！！