在Vue3中實現(xiàn)動態(tài)路由的示例代碼
更新時間：2024年07月10日 09:49:38 作者：大廠前端程序員
Vue3中的動態(tài)路由是一種高級功能,它允許你在URL中包含變量,這些變量可以在組件內(nèi)部通過$route.params對象訪問,動態(tài)路由通常用于構(gòu)建可配置性強、更具靈活性的應用,本文詳細介紹了如何在vue3中實現(xiàn)動態(tài)路由,需要的朋友可以參考下
選用技術(shù)棧vue3+typescripy+element-plus ui+router 4
編寫通用動態(tài)路由菜單
目標:根據(jù)路由配置信息，自動生成菜單內(nèi)容。實現(xiàn)更通用、更自動的菜單配置。
通用路由菜單組件實現(xiàn)步驟
1.提取通用路由文件
2.菜單組件讀取路由，動態(tài)渲染菜單項
3.綁定跳轉(zhuǎn)事件
4.同步路由的更新到菜單項高亮
5.按需補充更多能力
(1)提取通用路由文件
把 router/index.ts 中的路由變量定義為單獨的文件 routes.ts，代碼如下:
export const routes: Array<RouteRecordRaw> = [
{
path: '/shouye',
name: '首頁',
component: Shouye,
},
{
path: '/keichengxuexi',
name: '課程學習',
component: Courselearning,
},
}然后在 router/index.ts 中引入 routes.
(2)菜單組件讀取路由，動態(tài)渲染菜單項
<script setup lang= ts >
import { routes }from "../router/routes";
</script>模板中根據(jù)路由數(shù)組渲染菜單：
<el-menu-item v-for="item in routes" :key="item.path">
{{ item.name }}
</el-menu-item>(3)綁定跳轉(zhuǎn)事件
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
// 路由跳轉(zhuǎn)事件
const doMenuClick = (key: string) => {
router.push({
path: key,
});
};模板修改：
<el-menu mode="horizontal" @menu-item-click="doMenuClick" > ... </el-menu>
(4）同步路由的更新到菜單項高亮
同步高亮原理：首先點擊菜單項 => 觸發(fā)點擊事件并跳轉(zhuǎn)更新路由 => 更新路由后，同步去更新菜單欄的高亮狀態(tài)。
使用 Vue Router 的 afterEach 路由鉤子實現(xiàn)：
const router = useRouter();
// Tab 欄選中菜單項
const selectedKeys = ref(["/"]);
// 路由跳轉(zhuǎn)后，更新選中的菜單項
router.afterEach((to, from, failure) => {
selectedKeys.value = [to.path];
});模板引入變量：
<el-menu mode="horizontal" :default-active="selectedKeys[0]" @menu-item-click="doMenuClick" > </el-menu>
還可以給路由菜單組件增加更多能力。
(5)按需補充更多能力（可以參考網(wǎng)上的框架），比如根據(jù)配置控制菜單的顯隱
利用 routes 配置的 meta 屬性實現(xiàn)。routes.ts 中給路由配置新增一個標志位 hideInMenu，用于判斷路由是否顯隱：
{
path: "/hide",
name: "隱藏頁面",
component: HomeView,
meta: {
hideInMenu: true,
},
},然后根據(jù)該標志位過濾路由數(shù)組，僅保留需要展示的元素。
不要用 v-for + v-if 去條件渲染元素，這樣會先循環(huán)所有的元素，導致性能的浪費。
// 展示在菜單的路由數(shù)組
const visibleRoutes = routes.filter((item) => {
if (item.meta?.hideInMenu) {
return false;
}
return true;
});整體的代碼實現(xiàn)如下
菜單欄組件GlobalHeader.vue
<template>
<div id="globalHeader">
<el-menu :default-active="selectedKeys[0]"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="rgb(255, 165, 104)"
text-color="white"
active-text-color="rgb(0,0,51)">
<el-menu-item v-for="item in visibleRoutes" :key="item.path">
<el-sub-menu v-if="item.children" :index="item.path">
<template #title>
{{ item.name }}
</template>
<el-menu-item v-for="child in item.children" :key="child.path" @click="doMenuClick(`${item.path}/${child.path}`)">
{{ child.name }}
</el-menu-item>
</el-sub-menu>
<template v-else>
<el-menu-item @click="doMenuClick(item.path)">
{{ item.name }}
</el-menu-item>
</template>
</el-menu-item>
</el-menu>
</div>
</template>上述菜單由于加入了子菜單的原因，所以增加了一層if的判斷邏輯。這個路由下是否還有子路由。
<script setup lang="ts">
import { routes } from '../router/routes'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const handleSelect = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
const router = useRouter();
//當前選中的菜單項
const selectedKeys = ref(["/"]);
//路由跳轉(zhuǎn)時，選中菜單項1
router.afterEach((to, from) => {
selectedKeys.value = [to.path];
})
//展示在菜單中的路由
const visibleRoutes = routes.filter((item) => {
if (item.meta?.hideInMenu) {
console.log('隱藏的菜單:', item.name);
return false;
}
return true;
})
//點擊菜單跳轉(zhuǎn)到對應頁面
const doMenuClick = (key: string) => {
router.push({
path: key,
});
}
</script>routes.ts 路由組件
import { RouteRecordRaw } from "vue-router";
import Shouye from "../views/Shouye.vue";
import Courselearning from "../views/Courselearning.vue";
//vue3引入路由的方式
export const routes: Array<RouteRecordRaw> = [
{
path: '/shouye',
name: '首頁',
component: Shouye,
},
{
path: '/keichengxuexi',
name: '課程學習',
component: Courselearning,
meta:{
hideInMenu: true,
},
},
{
path: '/ketangxiaolian',
name: '課堂小練',
children: [
{
path: '/network-world',
name: '神奇的網(wǎng)絡世界',
component: Networld,
},
{
path: '/internet',
name: '走進互聯(lián)網(wǎng)',
component: Internet,
},
{
path: '/information-collection',
name: '網(wǎng)上收集信息',
component: Collectinformation,
},
{
path: '/communication',
name: '網(wǎng)上交流信息',
component: Communication,
},
{
path: '/soho-network',
name: '組件SOHO網(wǎng)絡',
component: Sohonetwork,
},
]
},
}以上就是在Vue3中實現(xiàn)動態(tài)路由的示例代碼的詳細內(nèi)容，更多關于Vue3動態(tài)路由的資料請關注腳本之家其它相關文章！
相關文章
Vue?ElementUI在el-table中使用el-popover問題
這篇文章主要介紹了Vue?ElementUI在el-table中使用el-popover問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue指令修飾符,v-bind對樣式控制的增強,computed計算屬性,watch監(jiān)視器詳解
這篇文章主要介紹了Vue指令修飾符,v-bind對樣式控制的增強,computed計算屬性,watch監(jiān)視器,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-06-06
在項目中遇到通過點擊加號實現(xiàn)輸入框的增加、以及對該輸入框的輸入內(nèi)容進行驗證，通過這些誘導因素創(chuàng)作的這篇文章，本文重點給大家介紹在Vue中使用Avue、配置過程以及實際應用,需要的朋友可以參考下2022-10-10
Vue3解決Mockjs引入后并訪問404(Not Found) 的頁面報錯問題
mock.js:是一款模擬數(shù)據(jù)生成器,可以生成隨機數(shù)據(jù),攔截 Ajax 請求,使用mockjs模擬后端接口,可隨機生成所需數(shù)據(jù),模擬對數(shù)據(jù)的增刪改查,本文給大家介紹了Vue3解決Mockjs引入后并訪問404(Not Found) 的頁面報錯問題,需要的朋友可以參考下2025-04-04
.sync?修飾符所提供的功能,當一個子組件改變了一個prop的值時,這個變化也會同步到父組件中所綁定,下面這篇文章主要給大家介紹了關于Vue中子組件向父組件傳值以及.sync修飾符的相關資料,需要的朋友可以參考下2022-11-11
vuejs通過filterBy、orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)
這篇文章主要為大家詳細介紹了vuejs通過filterBy、orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
項目中需要用到大量的數(shù)字輸入框限制,為了可以以后能又更多的拓展性,下面這篇文章主要給大家介紹了關于Vue中輸入框僅支持數(shù)字輸入的四種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue如何實現(xiàn)未登錄不能訪問某些頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了基于vue hash模式微信分享#號的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本文主要介紹了vue實現(xiàn)聊天框自動滾動的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05