Vue的addRoute函數(shù)可以動態(tài)添加路由,這個函數(shù)可以使用Vue Router官方文檔中的三種操作之一來完成:addRoute、addRoutes和getRoutes。本文使用addRoute操作。
const route = { path: '/new-route', component: () =>import('@/components/NewRoute.vue') } router.addRoute(route)
這個例子中,我們會添加一個新路由到Vue Router中。打開一個新的路由時,將渲染NewRoute組件。path屬性是該路由的路徑。
請注意,添加路由是在運行時完成,而不是在項目啟動時。如果您需要在項目啟動時添加路由,請將這個過程移動到Router實例的構(gòu)造函數(shù)中。
一些使用Vue Router的應(yīng)用程序可能需要在不刷新頁面的情況下重構(gòu)視圖層次結(jié)構(gòu)。在這種情況下,您可以使用addRoute函數(shù)先添加新的路由,然后使用router.replace先導(dǎo)航到一個占位符組件(例如一個空白組件)。
router.addRoute({ path: '/some-new-path', component: MyNewComponent }) // Push to navigate to the new route as normal router.push('/some-new-path') // Replace as a fallback router.replace('/my-placeholder-route')