import("../views/HomePage.v"/> import("../views/HomePage.v">
初始化vite vue ts項目,引入vue-router。
目錄結構如下,注意這個404重定向,vue3不支援直接使用「*」來匹配所有路由了,要使用:catchAll(.*)
。
初始化路由:
import {createRouter, createWebHashHistory} from "vue-router"; const routes = [ { path: "/", component: () => import("../views/HomePage.vue") }, { path: "/404", component: () => import("../views/ErrorPage.vue") }, { path: "/:catchAll(.*)", // 不识别的path自动匹配404 redirect: '/404', }, ] const router=createRouter({ history: createWebHashHistory(), routes }) export default router;
現在如果去存取vip路由,則會跳到404頁面。
如果需要存取vip頁面,那麼就需要我們動態地新增vip路由,下面程式碼實作了vip路由
新增:
import {useRouter} from "vue-router"; let router = useRouter(); function addRouter(){ router.addRoute( { path: "/vip", component: () => import("../views/VipPage.vue") }) }
此時我們再去存取vip路由路徑:
##可以成功存取了。 三、總結透過使用router物件的addRoute方法,可以實現動態新增路由。有時候可能是新增巢狀路由,也就是子路由。router.addRoute({ name: 'admin', path: '/admin', component: Admin }) router.addRoute('admin', { path: 'settings', component: AdminSettings }) // 这等效于: router.addRoute({ name: 'admin', path: '/admin', component: Admin, children: [{ path: 'settings', component: AdminSettings }], })
以上是vue3怎麼動態新增路由的詳細內容。更多資訊請關注PHP中文網其他相關文章!