Vue嵌套路由的各種用法詳解
更新時(shí)間：2025年01月28日 14:50:32 作者：百錦再@新空間代碼工作室
在 Vue 中,嵌套路由和 Element Plus 的 Menu 組件是構(gòu)建復(fù)雜單頁面應(yīng)用（SPA）時(shí)的常用組合,通過嵌套路由,可以實(shí)現(xiàn)多級(jí)頁面結(jié)構(gòu),以下是結(jié)合 Vue 嵌套路由和 Element Plus Menu 的各種用法和場景的詳細(xì)介紹,需要的朋友可以參考下
一、Vue 嵌套路由基礎(chǔ)
1. 定義嵌套路由
在 Vue Router 中，嵌套路由可以通過在路由配置中定義 children 屬性來實(shí)現(xiàn)。例如，以下是一個(gè)簡單的嵌套路由配置：
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/',
component: () => import('./views/Home.vue'),
},
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue'),
children: [
{
path: 'profile',
component: () => import('./views/Profile.vue'),
},
{
path: 'settings',
component: () => import('./views/Settings.vue'),
},
],
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
在這個(gè)例子中，/dashboard 是父路由，/dashboard/profile 和 /dashboard/settings 是子路由。
2. 使用嵌套路由
在父組件中，可以通過 來渲染子路由的組件：
<template>
<el-menu :default-active="$route.path" router>
<el-menu-item index="/home">首頁</el-menu-item>
<el-menu-item index="/users">用戶管理</el-menu-item>
<el-sub-menu index="/dashboard">
<template #title>儀表盤</template>
<el-menu-item index="/dashboard/profile">個(gè)人資料</el-menu-item>
<el-menu-item index="/dashboard/settings">設(shè)置</el-menu-item>
</el-sub-menu>
</el-menu>
</template>
二、Element Plus Menu 基礎(chǔ)用法
Element Plus 的 Menu 組件支持多種用法，包括水平菜單、垂直菜單、折疊菜單等。以下是一些基本用法：
1. 垂直菜單
<template>
<el-menu :default-active="$route.path" router>
<el-menu-item index="/home">首頁</el-menu-item>
<el-menu-item index="/users">用戶管理</el-menu-item>
<el-sub-menu index="/dashboard">
<template #title>儀表盤</template>
<el-menu-item index="/dashboard/profile">個(gè)人資料</el-menu-item>
<el-menu-item index="/dashboard/settings">設(shè)置</el-menu-item>
</el-sub-menu>
</el-menu>
</template>
在這個(gè)例子中，el-menu 的 router 屬性用于激活當(dāng)前路由對(duì)應(yīng)的菜單項(xiàng)。
2. 水平菜單
水平菜單可以通過設(shè)置 mode=“horizontal” 來實(shí)現(xiàn)：
<template>
<el-menu mode="horizontal" :default-active="$route.path" router>
<el-menu-item index="/home">首頁</el-menu-item>
<el-menu-item index="/users">用戶管理</el-menu-item>
<el-sub-menu index="/dashboard">
<template #title>儀表盤</template>
<el-menu-item index="/dashboard/profile">個(gè)人資料</el-menu-item>
<el-menu-item index="/dashboard/settings">設(shè)置</el-menu-item>
</el-sub-menu>
</el-menu>
</template>
三、Vue 嵌套路由與 Element Plus Menu 的結(jié)合
1. 動(dòng)態(tài)菜單
可以通過動(dòng)態(tài)綁定數(shù)據(jù)來生成菜單項(xiàng)。例如，從后端獲取菜單數(shù)據(jù)并渲染：
<template>
<el-menu :default-active="$route.path" router>
<template v-for="item in menuData" :key="item.index">
<el-menu-item v-if="!item.children" :index="item.index">
{{ item.label }}
</el-menu-item>
<el-sub-menu v-else :index="item.index">
<template #title>{{ item.label }}</template>
<el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
{{ child.label }}
</el-menu-item>
</el-sub-menu>
</template>
</el-menu>
</template>
<script setup>
import { ref } from 'vue';
const menuData = ref([
{ index: '/home', label: '首頁' },
{ index: '/users', label: '用戶管理' },
{
index: '/dashboard',
label: '儀表盤',
children: [
{ index: '/dashboard/profile', label: '個(gè)人資料' },
{ index: '/dashboard/settings', label: '設(shè)置' },
],
},
]);
</script>
在這個(gè)例子中，menuData 是一個(gè)動(dòng)態(tài)生成的菜單數(shù)據(jù)數(shù)組。
2. 路由模式
當(dāng)與 Vue Router 結(jié)合使用時(shí)，可以通過 router 屬性激活當(dāng)前路由對(duì)應(yīng)的菜單項(xiàng)。例如：
<template>
<el-menu :default-active="$route.path" router>
<el-menu-item index="/home">首頁</el-menu-item>
<el-menu-item index="/users">用戶管理</el-menu-item>
<el-sub-menu index="/dashboard">
<template #title>儀表盤</template>
<el-menu-item index="/dashboard/profile">個(gè)人資料</el-menu-item>
<el-menu-item index="/dashboard/settings">設(shè)置</el-menu-item>
</el-sub-menu>
</el-menu>
</template>
在這個(gè)例子中，el-menu 的 router 屬性會(huì)根據(jù)當(dāng)前路由路徑（$route.path）自動(dòng)激活對(duì)應(yīng)的菜單項(xiàng)。
3. 菜單事件處理
Element Plus 的 Menu 組件提供了多種事件，例如 select、open 和 close?？梢酝ㄟ^這些事件來處理菜單的交互邏輯。例如：
<template>
<el-menu :default-active="$route.path" router @select="handleSelect">
<el-menu-item index="/home">首頁</el-menu-item>
<el-menu-item index="/users">用戶管理</el-menu-item>
<el-sub-menu index="/dashboard">
<template #title>儀表盤</template>
<el-menu-item index="/dashboard/profile">個(gè)人資料</el-menu-item>
<el-menu-item index="/dashboard/settings">設(shè)置</el-menu-item>
</el-sub-menu>
</el-menu>
</template>
<script setup>
import { ref } from 'vue';
const handleSelect = (index) => {
console.log(`Selected menu: ${index}`);
};
</script>
在這個(gè)例子中，handleSelect 方法會(huì)在菜單項(xiàng)被選中時(shí)觸發(fā)。
四、高級(jí)用法
1. 權(quán)限控制
在實(shí)際應(yīng)用中，通常需要根據(jù)用戶的權(quán)限動(dòng)態(tài)顯示菜單項(xiàng)?？梢酝ㄟ^在路由配置中添加權(quán)限屬性，并在菜單渲染時(shí)進(jìn)行過濾。例如：
const routes = [
{
path: '/home',
component: () => import('./views/Home.vue'),
meta: { requiresAuth: false },
},
{
path: '/users',
component: () => import('./views/Users.vue'),
meta: { requiresAuth: true },
},
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue'),
children: [
{
path: 'profile',
component: () => import('./views/Profile.vue'),
meta: { requiresAuth: true },
},
{
path: 'settings',
component: () => import('./views/Settings.vue'),
meta: { requiresAuth: true },
},
],
},
];
然后在菜單渲染時(shí)，根據(jù)用戶權(quán)限過濾菜單項(xiàng)：
<template>
<el-menu :default-active="$route.path" router>
<template v-for="item in filteredMenuData" :key="item.index">
<el-menu-item v-if="!item.children" :index="item.index">
{{ item.label }}
</el-menu-item>
<el-sub-menu v-else :index="item.index">
<template #title>{{ item.label }}</template>
<el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
{{ child.label }}
</el-menu-item>
</el-sub-menu>
</template>
</el-menu>
</template>
<script setup>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const menuData = ref([
{ index: '/home', label: '首頁', meta: { requiresAuth: false } },
{ index: '/users', label: '用戶管理', meta: { requiresAuth: true } },
{
index: '/dashboard',
label: '儀表盤',
children: [
{ index: '/dashboard/profile', label: '個(gè)人資料', meta: { requiresAuth: true } },
{ index: '/dashboard/settings', label: '設(shè)置', meta: { requiresAuth: true } },
],
},
]);
const filteredMenuData = computed(() => {
return menuData.value.filter((item) => {
if (!item.children) {
return !item.meta.requiresAuth || store.state.isAuthenticated;
} else {
item.children = item.children.filter((child) => {
return !child.meta.requiresAuth || store.state.isAuthenticated;
});
return item.children.length > 0;
}
});
});
</script>
在這個(gè)例子中，filteredMenuData 是一個(gè)計(jì)算屬性，根據(jù)用戶的認(rèn)證狀態(tài)（store.state.isAuthenticated）動(dòng)態(tài)過濾菜單項(xiàng)。
2. 菜單的動(dòng)態(tài)加載
在某些情況下，菜單數(shù)據(jù)可能需要從后端動(dòng)態(tài)加載?？梢酝ㄟ^異步請(qǐng)求獲取菜單數(shù)據(jù)，并在獲取完成后渲染菜單。例如：
<template>
<el-menu :default-active="$route.path" router v-if="menuData.length > 0">
<template v-for="item in menuData" :key="item.index">
<el-menu-item v-if="!item.children" :index="item.index">
{{ item.label }}
</el-menu-item>
<el-sub-menu v-else :index="item.index">
<template #title>{{ item.label }}</template>
<el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
{{ child.label }}
</el-menu-item>
</el-sub-menu>
</template>
</el-menu>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const menuData = ref([]);
onMounted(async () => {
try {
const response = await axios.get('/api/menu');
menuData.value = response.data;
} catch (error) {
console.error('Failed to load menu data:', error);
}
});
</script>
在這個(gè)例子中，onMounted 生命周期鉤子用于在組件掛載時(shí)從后端加載菜單數(shù)據(jù)。
3. 菜單的國際化
在國際化應(yīng)用中，菜單項(xiàng)的標(biāo)題可能需要根據(jù)用戶的語言偏好動(dòng)態(tài)顯示?？梢酝ㄟ^ Vue I18n 來實(shí)現(xiàn)菜單的國際化。例如：
<template>
<el-menu :default-active="$route.path" router>
<template v-for="item in menuData" :key="item.index">
<el-menu-item v-if="!item.children" :index="item.index">
{{ $t(item.label) }}
</el-menu-item>
<el-sub-menu v-else :index="item.index">
<template #title>{{ $t(item.label) }}</template>
<el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
{{ $t(child.label) }}
</el-menu-item>
</el-sub-menu>
</template>
</el-menu>
</template>
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const menuData = ref([
{ index: '/home', label: 'menu.home' },
{ index: '/users', label: 'menu.users' },
{
index: '/dashboard',
label: 'menu.dashboard',
children: [
{ index: '/dashboard/profile', label: 'menu.profile' },
{ index: '/dashboard/settings', label: 'menu.settings' },
],
},
]);
</script>
<i18n>
{
"en": {
"menu": {
"home": "Home",
"users": "Users",
"dashboard": "Dashboard",
"profile": "Profile",
"settings": "Settings"
}
},
"zh": {
"menu": {
"home": "首頁",
"users": "用戶管理",
"dashboard": "儀表盤",
"profile": "個(gè)人資料",
"settings": "設(shè)置"
}
}
}
</i18n>
在這個(gè)例子中，$t 方法用于動(dòng)態(tài)翻譯菜單項(xiàng)的標(biāo)題。
4. 菜單的折疊與展開
Element Plus 的 Menu 組件支持折疊和展開功能。可以通過設(shè)置 collapse 屬性來控制菜單的折疊狀態(tài)。例如：
<template>
<div>
<el-button @click="toggleCollapse">切換菜單</el-button>
<el-menu :default-active="$route.path" router :collapse="isCollapsed">
<el-menu-item index="/home">首頁</el-menu-item>
<el-menu-item index="/users">用戶管理</el-menu-item>
<el-sub-menu index="/dashboard">
<template #title>儀表盤</template>
<el-menu-item index="/dashboard/profile">個(gè)人資料</el-menu-item>
<el-menu-item index="/dashboard/settings">設(shè)置</el-menu-item>
</el-sub-menu>
</el-menu>
</div>
</template>
<script setup>
import { ref } from 'vue';
const isCollapsed = ref(false);
const toggleCollapse = () => {
isCollapsed.value = !isCollapsed.value;
};
</script>
在這個(gè)例子中，isCollapsed 是一個(gè)響應(yīng)式變量，用于控制菜單的折疊狀態(tài)。點(diǎn)擊按鈕時(shí)，toggleCollapse 方法會(huì)切換菜單的折疊狀態(tài)。
5. 菜單的自定義樣式
可以通過自定義 CSS 來調(diào)整菜單的樣式。例如：
.el-menu {
background-color: #f5f7fa;
border-right: none;
}
.el-menu-item {
color: #333;
}
.el-menu-item.is-active {
background-color: #409eff;
color: #fff;
}
.el-sub-menu__title {
color: #333;
}
.el-sub-menu__title:hover {
background-color: #e6f7ff;
}
在這個(gè)例子中，自定義了菜單的背景顏色、字體顏色和激活狀態(tài)的樣式。
五、完整示例
以下是一個(gè)完整的示例，結(jié)合了嵌套路由、動(dòng)態(tài)菜單、權(quán)限控制、國際化和折疊功能：
- 路由配置
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/',
component: () => import('./views/Home.vue'),
meta: { requiresAuth: false },
},
{
path: '/users',
component: () => import('./views/Users.vue'),
meta: { requiresAuth: true },
},
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue'),
children: [
{
path: 'profile',
component: () => import('./views/Profile.vue'),
meta: { requiresAuth: true },
},
{
path: 'settings',
component: () => import('./views/Settings.vue'),
meta: { requiresAuth: true },
},
],
meta: { requiresAuth: true },
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
- 菜單組件
<template>
<div>
<el-button @click="toggleCollapse">切換菜單</el-button>
<el-menu :default-active="$route.path" router :collapse="isCollapsed">
<template v-for="item in filteredMenuData" :key="item.index">
<el-menu-item v-if="!item.children" :index="item.index">
{{ $t(item.label) }}
</el-menu-item>
<el-sub-menu v-else :index="item.index">
<template #title>{{ $t(item.label) }}</template>
<el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
{{ $t(child.label) }}
</el-menu-item>
</el-sub-menu>
</template>
</el-menu>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const store = useStore();
const menuData = ref([
{ index: '/home', label: 'menu.home', meta: { requiresAuth: false } },
{ index: '/users', label: 'menu.users', meta: { requiresAuth: true } },
{
index: '/dashboard',
label: 'menu.dashboard',
children: [
{ index: '/dashboard/profile', label: 'menu.profile', meta: { requiresAuth: true } },
{ index: '/dashboard/settings', label: 'menu.settings', meta: { requiresAuth: true } },
],
meta: { requiresAuth: true },
},
]);
const isCollapsed = ref(false);
const toggleCollapse = () => {
isCollapsed.value = !isCollapsed.value;
};
const filteredMenuData = computed(() => {
return menuData.value.filter((item) => {
if (!item.children) {
return !item.meta.requiresAuth || store.state.isAuthenticated;
} else {
item.children = item.children.filter((child) => {
return !child.meta.requiresAuth || store.state.isAuthenticated;
});
return item.children.length > 0;
}
});
});
</script>
<i18n>
{
"en": {
"menu": {
"home": "Home",
"users": "Users",
"dashboard": "Dashboard",
"profile": "Profile",
"settings": "Settings"
}
},
"zh": {
"menu": {
"home": "首頁",
"users": "用戶管理",
"dashboard": "儀表盤",
"profile": "個(gè)人資料",
"settings": "設(shè)置"
}
}
}
</i18n>
- 樣式
.el-menu {
background-color: #f5f7fa;
border-right: none;
}
.el-menu-item {
color: #333;
}
.el-menu-item.is-active {
background-color: #409eff;
color: #fff;
}
.el-sub-menu__title {
color: #333;
}
.el-sub-menu__title:hover {
background-color: #e6f7ff;
}
六、總結(jié)
通過結(jié)合 Vue 嵌套路由和 Element Plus 的 Menu 組件，可以實(shí)現(xiàn)功能豐富且靈活的導(dǎo)航菜單。本文介紹了從基礎(chǔ)用法到高級(jí)功能的多種場景，包括動(dòng)態(tài)菜單、權(quán)限控制、國際化、折疊功能和自定義樣式。這些功能可以根據(jù)實(shí)際需求靈活組合，以滿足復(fù)雜應(yīng)用的需求。
以上就是Vue嵌套路由的各種用法詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue嵌套路由用法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue 自定指令生成uuid滾動(dòng)監(jiān)聽達(dá)到tab表格吸頂效果的代碼
這篇文章主要介紹了vue 自定指令生成uuid滾動(dòng)監(jiān)聽達(dá)到tab表格吸頂效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
vue3使用Pinia的store的組件化開發(fā)模式詳解
這篇文章主要介紹了vue3使用Pinia的store的組件化開發(fā)模式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了基于vue的tab-list類目切換商品列表組件的示例代碼，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
22個(gè)Vue優(yōu)化技巧(項(xiàng)目實(shí)用)
演示代碼使用 Vue3 + ts + Vite 編寫，但是也會(huì)列出適用于 Vue2 的優(yōu)化技巧，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue diff算法的使用，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-04-04
如何使用uniapp內(nèi)置組件webview消息傳遞詳解
uni-app的web-view組件用于在應(yīng)用中打開網(wǎng)頁,并支持應(yīng)用和網(wǎng)頁之間的消息傳遞,這篇文章主要介紹了如何使用uniapp內(nèi)置組件webview消息傳遞的相關(guān)資料,需要的朋友可以參考下2025-02-02
vue項(xiàng)目中定義全局變量、函數(shù)的幾種方法
這篇文章主要介紹了vue項(xiàng)目中定義全局變量、函數(shù)的幾種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
<keep-alive> 是一個(gè)抽象組件,它自身不會(huì)渲染一個(gè)DOM元素,也不會(huì)出現(xiàn)在組件的父組件鏈中,下面這篇文章主要給大家介紹了關(guān)于vue3利用keepAlive緩存頁面的相關(guān)資料,需要的朋友可以參考下2022-11-11
Vue實(shí)現(xiàn)回到頂部和底部動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)回到頂部和底部動(dòng)畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
Vue實(shí)現(xiàn)自定義組件改變組件背景色(示例代碼)
要實(shí)現(xiàn) Vue 自定義組件改變組件背景色,你可以通過 props 將背景色作為組件的一個(gè)屬性傳遞給組件,在組件內(nèi)部監(jiān)聽這個(gè)屬性的變化,并將其應(yīng)用到組件的樣式中,下面通過示例代碼介紹Vue如何實(shí)現(xiàn)自定義組件改變組件背景色,感興趣的朋友一起看看吧2024-03-03