vue3動態(tài)添加路由
更新時間：2022年06月20日 14:17:56 作者：小綿楊Yancy
這篇文章主要介紹了vue3動態(tài)添加路由,文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
前言
有的時候我們需要根據(jù)不同的用戶身份生成不同的路由規(guī)則，例如：
vip用戶應(yīng)該有自己的vip頁面所對應(yīng)的專用路由。
一、初始化項目
初始化vite + vue + ts項目，引入vue-router。
目錄結(jié)構(gòu)如下，注意這個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;現(xiàn)在如果去訪問vip路由，則會跳轉(zhuǎn)到404頁面。
二、添加“vip”路由
如果需要訪問vip頁面，那么就需要我們動態(tài)地添加vip路由，下面代碼實現(xiàn)了vip路由添加：
import {useRouter} from "vue-router";
let router = useRouter();
function addRouter(){
router.addRoute( {
path: "/vip",
component: () => import("../views/VipPage.vue")
})
}此時我們再去訪問vip路由路徑：
可以成功訪問了。
三、總結(jié)
可以了解到，動態(tài)添加路由就是使用了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 }],
})到此這篇關(guān)于vue3動態(tài)添加路由的文章就介紹到這了,更多相關(guān)vue動態(tài)路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項目中使用particles實現(xiàn)粒子背景效果及遇到的坑(按鈕沒有點擊響應(yīng))
為了提高頁面展示效果，登錄界面內(nèi)容比較單一的，粒子效果作為背景經(jīng)常使用到，vue工程中利用vue-particles可以很簡單的實現(xiàn)頁面的粒子背景效果，本文給大家分享在實現(xiàn)過程中遇到問題，需要的朋友一起看看吧2020-02-02
解決element-ui的el-dialog組件中調(diào)用ref無效的問題
這篇文章主要介紹了解決element-ui的el-dialog組件中調(diào)用ref無效的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了詳解Nuxt.js中使用Element-UI填坑，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue導(dǎo)出excel多層表頭的實現(xiàn)方案詳解
這篇文章主要為大家詳細介紹了vue導(dǎo)出excel多層表頭的實現(xiàn)方案,文中的示例代碼簡潔易懂,具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
這篇文章主要為大家詳細介紹了Mint UI實現(xiàn)A-Z字母排序的城市選擇列表，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
vue 全局封裝loading加載教程(全局監(jiān)聽)
這篇文章主要介紹了vue 全局封裝loading加載教程(全局監(jiān)聽)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue.js 是一個漸進式的JavaScript框架,廣泛用于構(gòu)建交互式用戶界面,在 Vue 中,雙向綁定是一項非常核心的概念,尤其是在處理表單輸入時,它使得數(shù)據(jù)和用戶界面之間的互動變得簡單又高效,在本篇博客中,我們將深入探討如何在 Vue 3 中實現(xiàn)表單輸入的雙向綁定2025-01-01
這篇文章主要為大家介紹了vue-print-nb只打印一頁解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪<BR>2023-11-11
vue3在table里使用elementUI的form表單驗證的示例代碼
這篇文章主要介紹了vue3在table里使用elementUI的form表單驗證的示例代碼,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue窗口變化onresize,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08