1、Vue3 嵌套路由
Vue3 嵌套路由的使用和 Vue2 相差不大，主要的区别是 Vue3 的路由实例化使用了 createApp() 方法，所以实例化路由时需要传入根组件。另外，Vue3 的路由对象除了包含 Vue2 中的导航守卫、导航钩子和解析守卫等功能外，还新增了 meta prop 和 route prop。
在使用嵌套路由时，建议将路由按照功能模块进行分层，每一层代表一个主要的功能块，每个层级下的路由数量不要过多，一般建议不要超过 10 个，层级也不要超过 5 层。同时，根据实际业务需求，可以适当调整路由层级和数量，以达到更好的管理和使用效果。
2、项目结构
3、编写相关页面代码
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传参方式接收传来的参数 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参数（可以定义多个） name: 'Tigerhhzzb', component: () => import('@/views/Home/Tigerhhzzb.vue'), }, ] }, ] export const router = createRouter({ // 路由的history模式，共有三种模式， // createWebHistory、createWebHashHistory、createMemoryHistory // history: createWebHashHistory(), history: createWebHistory(), // 路由配置 routes, // 是否严格匹配路由 strict: true, // 路由跳转完成后，页面滚动行为 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> <!-- 模拟有权限时显示 --> <div v-if="roles.includes(role)"> <h2>嵌套路由</h2> <router-link to="/home/tigerhhzz">push跳转到/home/tigerhhzz页面</router-link> <br> <!-- 加了/就要写全 /home/lxb --> <router-link replace to="/home/tigerhhzzb/id:2/title:102">push跳转到/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: '', // 我的当前角色 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>我是练习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跳转进来的不可以使用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>我是练习{{ 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跳转到/home/tigerhhzzb页面>（嵌套一层的路由）页面效果：
嵌套一层的路由从原本/home跳入了/home/tigerhhzzb 子路由页面，点击回到首页。
- 再点击push跳转到/home/tigerhhzz页面>（嵌套多层的路由）页面效果：
- 子路由效果：
先去到了第一层/home/tigerhhzz子路由页面，
再点击去子路由childA按钮>页面效果：
进到了嵌套的第二层/home/tigerhhzz/childA子路由页面
点击可返回上一页/home/lx 再点击可回到/home首页。
