vue3動(dòng)態(tài)添加路由

更新時(shí)間：2022年06月20日 14:17:56 作者：小綿楊Yancy

這篇文章主要介紹了vue3動(dòng)態(tài)添加路由,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

前言

有的時(shí)候我們需要根據(jù)不同的用戶身份生成不同的路由規(guī)則，例如：

vip用戶應(yīng)該有自己的vip頁(yè)面所對(duì)應(yīng)的專用路由。

一、初始化項(xiàng)目

初始化vite + vue + ts項(xiàng)目，引入vue-router。
目錄結(jié)構(gòu)如下，注意這個(gè)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(.*)", // 不識(shí)別的path自動(dòng)匹配404
        redirect: '/404',
    },
]
const router=createRouter({
    history: createWebHashHistory(),
    routes
})
export default router;

現(xiàn)在如果去訪問(wèn)vip路由，則會(huì)跳轉(zhuǎn)到404頁(yè)面。

二、添加“vip”路由

如果需要訪問(wèn)vip頁(yè)面，那么就需要我們動(dòng)態(tài)地添加vip路由，下面代碼實(shí)現(xiàn)了vip路由添加：

import {useRouter} from "vue-router";
let router = useRouter();
function addRouter(){
  router.addRoute(  {
    path: "/vip",
    component: () => import("../views/VipPage.vue")
  })
}

此時(shí)我們?cè)偃ピL問(wèn)vip路由路徑：

可以成功訪問(wèn)了。

三、總結(jié)

可以了解到，動(dòng)態(tài)添加路由就是使用了router對(duì)象的addRoute方法。有時(shí)候可能是添加嵌套路由，也就是子路由。

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動(dòng)態(tài)添加路由的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目中使用particles實(shí)現(xiàn)粒子背景效果及遇到的坑(按鈕沒(méi)有點(diǎn)擊響應(yīng))
為了提高頁(yè)面展示效果，登錄界面內(nèi)容比較單一的，粒子效果作為背景經(jīng)常使用到，vue工程中利用vue-particles可以很簡(jiǎn)單的實(shí)現(xiàn)頁(yè)面的粒子背景效果，本文給大家分享在實(shí)現(xiàn)過(guò)程中遇到問(wèn)題，需要的朋友一起看看吧
2020-02-02
解決element-ui的el-dialog組件中調(diào)用ref無(wú)效的問(wèn)題
這篇文章主要介紹了解決element-ui的el-dialog組件中調(diào)用ref無(wú)效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
詳解Nuxt.js中使用Element-UI填坑
這篇文章主要介紹了詳解Nuxt.js中使用Element-UI填坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
vue導(dǎo)出excel多層表頭的實(shí)現(xiàn)方案詳解
這篇文章主要為大家詳細(xì)介紹了vue導(dǎo)出excel多層表頭的實(shí)現(xiàn)方案,文中的示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-04-04
Mint UI實(shí)現(xiàn)A-Z字母排序的城市選擇列表
這篇文章主要為大家詳細(xì)介紹了Mint UI實(shí)現(xiàn)A-Z字母排序的城市選擇列表，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
vue 全局封裝loading加載教程(全局監(jiān)聽(tīng))
這篇文章主要介紹了vue 全局封裝loading加載教程(全局監(jiān)聽(tīng))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
Vue3實(shí)現(xiàn)表單輸入的雙向綁定的示例代碼
Vue.js 是一個(gè)漸進(jìn)式的JavaScript框架,廣泛用于構(gòu)建交互式用戶界面,在 Vue 中,雙向綁定是一項(xiàng)非常核心的概念,尤其是在處理表單輸入時(shí),它使得數(shù)據(jù)和用戶界面之間的互動(dòng)變得簡(jiǎn)單又高效,在本篇博客中,我們將深入探討如何在 Vue 3 中實(shí)現(xiàn)表單輸入的雙向綁定
2025-01-01
vue-print-nb只打印一頁(yè)解決方法示例
這篇文章主要為大家介紹了vue-print-nb只打印一頁(yè)解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>
2023-11-11
vue3在table里使用elementUI的form表單驗(yàn)證的示例代碼
這篇文章主要介紹了vue3在table里使用elementUI的form表單驗(yàn)證的示例代碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-12-12
vue窗口變化onresize詳解
這篇文章主要介紹了vue窗口變化onresize,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08