vue3使用vue-router嵌套多級路由的方法
更新時間：2023年12月18日 16:10:40 作者：hhzz
Vue3 嵌套路由的使用和 Vue2 相差不大,主要的區(qū)別是 Vue3 的路由實例化使用了 createApp() 方法,所以實例化路由時需要傳入根組件,這篇文章主要介紹了vue3使用vue-router嵌套路由(多級路由),需要的朋友可以參考下
1、Vue3 嵌套路由
Vue3 嵌套路由的使用和 Vue2 相差不大，主要的區(qū)別是 Vue3 的路由實例化使用了 createApp() 方法，所以實例化路由時需要傳入根組件。另外，Vue3 的路由對象除了包含 Vue2 中的導(dǎo)航守衛(wèi)、導(dǎo)航鉤子和解析守衛(wèi)等功能外，還新增了 meta prop 和 route prop。
在使用嵌套路由時，建議將路由按照功能模塊進行分層，每一層代表一個主要的功能塊，每個層級下的路由數(shù)量不要過多，一般建議不要超過 10 個，層級也不要超過 5 層。同時，根據(jù)實際業(yè)務(wù)需求，可以適當(dāng)調(diào)整路由層級和數(shù)量，以達到更好的管理和使用效果。
2、項目結(jié)構(gòu)
3、編寫相關(guān)頁面代碼
3.1、編寫route文件下 index.ts文件
route文件下 index.ts文件代碼：
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes: RouteRecordRaw[] = [
{
path: '/',
redirect: '/home',
},
{
path: '/home',
name: 'Homeindex',
component: () => import('../views/Home/index.vue'),
meta: {
title: 'Home Page',
roles: ['admin', 'admin1']
},
children: [
{
path: 'tigerhhzz',
name: 'Tigerhhzz',
component: () => import('@/views/Home/Tigerhhzz.vue'),
// 也可以使用props傳參方式接收傳來的參數(shù)
props: (propsRouter) => {
// console.log('props >router', propsRouter)
// 可以return query 也可以return params支持兩種傳參方式
return propsRouter.query
},
// 多級嵌套 建議用query傳參
children: [
{
path: 'childA',
name: 'ChildA',
component: () => import('@/views/Home/ChildA.vue'),
},
]
},
{
path: 'tigerhhzzb/:id/:title', // 提前定義params參數(shù)（可以定義多個）
name: 'Tigerhhzzb',
component: () => import('@/views/Home/Tigerhhzzb.vue'),
},
]
},
]
export const router = createRouter({
// 路由的history模式，共有三種模式，
// createWebHistory、createWebHashHistory、createMemoryHistory
// history: createWebHashHistory(),
history: createWebHistory(),
// 路由配置
routes,
// 是否嚴(yán)格匹配路由
strict: true,
// 路由跳轉(zhuǎn)完成后，頁面滾動行為
scrollBehavior: () => ({ left: 0, top: 0 }),
})3.2、main.ts文件代碼：
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import {router} from './router/index'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')3.3、App.vue文件代碼：
<script>
import { defineComponent } from 'vue'
// vue3.0版本語法
export default defineComponent({
name: 'App',
})
</script>
<template>
<RouterView />
</template>
<style>
</style>3.4、views文件夾下的Home文件夾下的index.vue文件代碼：
<template>
<div class="home">
<h2>首頁{{ title }}</h2>
<!-- 模擬有權(quán)限時顯示 -->
<div v-if="roles.includes(role)">
<h2>嵌套路由</h2>
<router-link to="/home/tigerhhzz">push跳轉(zhuǎn)到/home/tigerhhzz頁面</router-link>
<br>
<!-- 加了/就要寫全 /home/lxb -->
<router-link replace to="/home/tigerhhzzb/id:2/title:102">push跳轉(zhuǎn)到/home/tigerhhzzb頁面</router-link>
<router-view></router-view>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs, } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({
name: 'Homeindex',
setup() {
const router = useRouter()
const route: any = useRoute()
const state = reactive({
title: '',
role: '', // 我的當(dāng)前角色
roles: [''],
routerGo: (path) => {
if (path === 'lx') {
// query傳參可以用path 也可以用name: Lx
router.push({
path: path,
query: {
title: '101',
id: 1
}
})
// router.replace
} else {
// params傳參只能用name
router.replace({
// path: path + '/id:2/title:102',
name: 'Lxb',
params: {
title: '102',
id: 2
}
})
}
},
})
onMounted(() => {
console.log('/home', route)
state.title = route.meta.title
state.roles = route.meta.roles
// 模擬一個接口
setTimeout(() => {
const res = {
code: 200,
data: {
token: '123456',
userName: '吳彥祖',
role: 'admin'
}
}
state.role = res.data.role
}, 0)
})
return {
...toRefs(state)
}
}
})
</script>
<style>
.home {
color: pink;
font-size: 14px;
}
</style>3.5、views文件夾下的Home文件夾下的Tigerhhzzb.vue文件代碼：
<template>
<div style="font-size: 14px;">
<h2>我是練習(xí)b{{ route?.params?.title }}頁面</h2>
<div>id:{{ route?.params?.id }}</div>
<button @click="routerGoBack">返回首頁</button>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// vue3.0語法
export default defineComponent({
name: 'Tigerhhzzb',
setup() {
const route = useRoute()
const router = useRouter()
const state: any = reactive({
routerGoBack: () => {
router.replace('/home')
// 由replace跳轉(zhuǎn)進來的不可以使用router.go(-1) 路由棧是空的》回不到上一個路由
},
})
onMounted(() => {
console.log(route)
})
return {
route,
...toRefs(state)
}
},
})
</script>3.6、views文件夾下的Home文件夾下的T.vue文件代碼：
<template>
<div style="font-size: 14px;">
<h2>我是練習(xí){{ title }}頁面</h2>
<div>id:{{ id }}</div>
<div>props: {{ props }}</div>
<button @click="routerGoBack">返回上一頁</button>
<br>
<button @click="routerGo('/home/lx/childA')">去子路由childA</button>
<!-- <router-view></router-view> -->
<router-view />
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// vue3.0語法
export default defineComponent({
name: 'Tigerhhzz',
props: {
id: {
type: String,
default: ''
},
title: {
type: String,
default: ''
},
},
setup(props) {
const route = useRoute()
const router = useRouter()
const state: any = reactive({
id: '',
title: '',
routerGoBack: () => {
router.go(-1) // go(-1)回到上一個路由
// 也可以用router.replace('/home')跳回指定頁
},
routerGo: (path) => {
router.push(path)
}
})
onMounted(() => {
console.log('lx route', route)
console.log('lx props', props)
if (route.query) {
state.id = route.query.id
state.title = route.query.title
}
})
return {
props,
...toRefs(state)
}
},
})
</script>3.7、views文件夾下的Home文件夾下的ChildA.vue文件代碼：
<template>
<div style="font-size: 14px;background: skyblue;">
<h3>我是ChildA組件</h3>
<h3>route.query:{{ route.query }}</h3>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// vue3.0語法
export default defineComponent({
name: 'ChildA',
setup() {
const router = useRouter()
const route = useRoute()
function goBack() {
router.go(-1)
}
onMounted(() => {
console.log(route)
})
// 可以在頁面銷毀前清除事件
// onUnmounted(() => {
// proxy.$mittBus.off('mittUserA')
// })
return {
route, goBack
}
},
})
</script>4、測試效果 初始頁面效果：
先點擊push跳轉(zhuǎn)到/home/tigerhhzzb頁面>（嵌套一層的路由）頁面效果：
嵌套一層的路由從原本/home跳入了/home/tigerhhzzb 子路由頁面，點擊回到首頁。
再點擊push跳轉(zhuǎn)到/home/tigerhhzz頁面>（嵌套多層的路由）頁面效果：
子路由效果：
先去到了第一層/home/tigerhhzz子路由頁面，
再點擊去子路由childA按鈕>頁面效果：
進到了嵌套的第二層/home/tigerhhzz/childA子路由頁面
點擊可返回上一頁/home/lx 再點擊可回到/home首頁。
到此這篇關(guān)于vue3使用vue-router嵌套路由(多級路由)的文章就介紹到這了,更多相關(guān)vue3嵌套多級路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vscode中prettier和eslint換行縮進沖突的問題
這篇文章主要介紹了vscode中prettier和eslint換行縮進沖突的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在 Vue 中,append-to-body=“true” 主要用于一些第三方組件（如 Element UI 或 Ant Design Vue 中的彈出框、下拉菜單等）來控制組件的掛載位置,本文介紹Vue中控制組件的掛載位置,感興趣的朋友跟隨小編一起看看吧2024-12-12
這篇文章主要介紹了vue中的數(shù)字滾動和翻牌器,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
defineProperty和Proxy基礎(chǔ)功能及性能對比
這篇文章主要為大家介紹了defineProperty和Proxy基礎(chǔ)功能及性能對比，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了Vue子組件調(diào)用父組件方法案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
本文將探討 Vue 版本升級后常見的不兼容問題,并提供相應(yīng)的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
本篇文章主要介紹了vue-axios使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了vue iview 隱藏Table組件里的某一列操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue組件化通訊的實例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
基于 flexible 的 Vue 組件：Toast -- 顯示框效果
這篇文章主要介紹了基于 flexible 的 Vue 組件：Toast -- 顯示框效果,需要的朋友可以參考下2017-12-12