Vue中的router具有很多強(qiáng)大的特性,其中之一就是能夠動(dòng)態(tài)地添加路由。使用addRoutes就可以實(shí)現(xiàn)這一特性,不需要重新注冊(cè)router。
// 初始路由配置 const router = new VueRouter({ routes: [ { path: '/home', component: Home } ] }); // 動(dòng)態(tài)添加路由 router.addRoutes([ { path: '/about', component: About } ]);
在上面的代碼中,我們首先定義了一個(gè)初始的路由配置,包含了一個(gè)/home路徑的組件。然后通過調(diào)用addRoutes方法,動(dòng)態(tài)地添加了一個(gè)/about路徑的組件。
假設(shè)我們?cè)谠L問/home頁面的時(shí)候,需要根據(jù)用戶的身份信息動(dòng)態(tài)地添加一些路由,那么就可以使用addRoutes來實(shí)現(xiàn)。舉例來說:
beforeEnter(to, from, next) { // 根據(jù)用戶身份信息獲取動(dòng)態(tài)路由配置 const dynamicRoutes = getDynamicRoutes(to.meta.auth); // 動(dòng)態(tài)添加路由 router.addRoutes(dynamicRoutes); // 繼續(xù)進(jìn)行路由跳轉(zhuǎn) next(); }
在上述代碼中,我們使用了Vue Router提供的beforeEnter函數(shù),在路由跳轉(zhuǎn)之前執(zhí)行一些操作。在這里,我們通過調(diào)用getDynamicRoutes方法獲取了一些動(dòng)態(tài)路由配置,然后使用addRoutes方法將這些路由添加進(jìn)去。