vue3動態添加路由
前言
有的時候我們需要根據不同的用戶身份生成不同的路由規則,例如:
vip用戶應該有自己的vip頁面所對應的專用路由。
一、初始化項目
初始化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路由,下面代碼實現瞭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動態添加路由的文章就介紹到這瞭,更多相關vue動態路由內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue3.x項目降級到vue2.7的解決方案
- vue3使用vue-router的完整步驟記錄
- vue3配置router路由並實現頁面跳轉功能
- vue中vue-router的使用說明(包括在ssr中的使用)
- vue3獲取url地址參數的示例詳解