vue3使用vue-router嵌套路由(多级路由)

Vue3 嵌套路由的使用和 Vue2 相差不大，主要的区别是 Vue3 的路由实例化使用了 createApp() 方法，所以实例化路由时需要传入根组件。另外，Vue3 的路由对象除了包含 Vue2 中的导航守卫、导航钩子和解析守卫等功能外，还新增了 meta prop 和 route prop。

在使用嵌套路由时，建议将路由按照功能模块进行分层，每一层代表一个主要的功能块，每个层级下的路由数量不要过多，一般建议不要超过 10 个，层级也不要超过 5 层。同时，根据实际业务需求，可以适当调整路由层级和数量，以达到更好的管理和使用效果。

route文件下 index.ts文件代码：

1. import {
2. createRouter,
3. createWebHashHistory,
4. RouteRecordRaw
5. } from "vue-router";
6. // createWebHashHistory,createWebHistory
8. const routes: RouteRecordRaw[] = [
9. {
10. path: '/',
11. redirect: '/home',
12. },
13. {
14. path: '/home',
15. name: 'Home',
16. component: () => import('@/views/Home/index.vue'),
17. meta: {
18. title: 'Home Page',
19. roles: ['admin', 'admin1']
20. },
21. children: [
22. {
23. path: 'lx',
24. name: 'Lx',
25. component: () => import('@/views/Home/Lx.vue'),
26. // 也可以使用props传参方式接收传来的参数
27. props: (propsRouter) => {
28. // console.log('props >router', propsRouter)
29. // 可以return query 也可以return params支持两种传参方式
30. return propsRouter.query
31. },
32. // 多级嵌套 建议用query传参
33. children: [
34. {
35. path: 'childA',
36. name: 'ChildA',
37. component: () => import('@/views/Home/ChildA.vue'),
38. },
39. ]
40. },
41. {
42. path: 'lxb/:id/:title', // 提前定义params参数（可以定义多个）
43. name: 'Lxb',
44. component: () => import('@/views/Home/Lxb.vue'),
45. },
46. ]
47. },
48. ]
50. export const router = createRouter({
51. // 路由的history模式，共有三种模式，
52. // createWebHistory、createWebHashHistory、createMemoryHistory
53. history: createWebHashHistory(),// history: createWebHistory(),
54. // 路由配置
55. routes,
56. // 是否严格匹配路由
57. strict: true,
58. // 路由跳转完成后，页面滚动行为
59. scrollBehavior: () => ({ left: 0, top: 0 }),
60. })

main.ts文件代码：

1. import { router } from './route/index'
2. import { createApp } from 'vue'
4. const app = createApp(App)
5. app.use(router).mount('#app')

App.vue文件代码：

1. <template>
2. <router-view />
3. </template>
5. <script>
6. import { defineComponent } from 'vue'
7. // vue3.0版本语法
8. export default defineComponent({
9. name: 'App',
10. })
11. </script>

views文件夹下的Home文件夹下的index.vue文件代码：

1. <template>
2. <div class="home">
3. <h2>首页{{ title }}</h2>
4. <!-- 模拟有权限时显示 -->
5. <div v-if="roles.includes(role)">
6. <h2>嵌套路由</h2>
7. <router-link to="/home/lx">push跳转到/home/lx页面</router-link>
8. <br>
9. <!-- 加了/就要写全 /home/lxb -->
10. <router-link replace to="/home/lxb/id:2/title:102">push跳转到/home/lxb页面</router-link>
12. <router-view></router-view>
13. </div>
14. </div>
15. </template>
17. <script lang="ts">
18. import { defineComponent, reactive, onMounted, toRefs, } from 'vue'
19. import { useRoute, useRouter } from 'vue-router'
21. export default defineComponent({
22. name: 'Home',
23. setup() {
24. const router = useRouter()
25. const route: any = useRoute()
27. const state = reactive({
28. title: '',
29. role: '', // 我的当前角色
30. roles: [''],
31. routerGo: (path) => {
32. if (path === 'lx') {
33. // query传参可以用path 也可以用name: Lx
34. router.push({
35. path: path,
36. query: {
37. title: '101',
38. id: 1
39. }
40. })
41. // router.replace
42. } else {
43. // params传参只能用name
44. router.replace({
45. // path: path + '/id:2/title:102',
46. name: 'Lxb',
47. params: {
48. title: '102',
49. id: 2
50. }
51. })
52. }
53. },
54. })
55. onMounted(() => {
56. console.log('/home', route)
57. state.title = route.meta.title
58. state.roles = route.meta.roles
59. // 模拟一个接口
60. setTimeout(() => {
61. const res = {
62. code: 200,
63. data: {
64. token: '123456',
65. userName: '吴彦祖',
66. role: 'admin'
67. }
68. }
69. state.role = res.data.role
70. }, 0)
71. })
72. return {
73. ...toRefs(state)
74. }
75. }
76. })
77. </script>
79. <style lang="less" scoped>
80. .home {
81. color: pink;
82. font-size: 14px;
83. }
84. </style>

views文件夹下的Home文件夹下的Lxb.vue文件代码：

1. <template>
2. <div style="font-size: 14px;">
3. <h2>我是练习b{{ route?.params?.title }}页面</h2>
4. <div>id:{{ route?.params?.id }}</div>
5. <button @click="routerGoBack">返回首页</button>
6. </div>
7. </template>
9. <script lang="ts">
10. import { defineComponent, onMounted, reactive, toRefs } from 'vue'
11. import { useRoute, useRouter } from 'vue-router'
13. // vue3.0语法
14. export default defineComponent({
15. name: 'Lxb',
16. setup() {
17. const route = useRoute()
18. const router = useRouter()
19. const state: any = reactive({
20. routerGoBack: () => {
21. router.replace('/home')
22. // 由replace跳转进来的不可以使用router.go(-1) 路由栈是空的》回不到上一个路由
23. },
24. })
26. onMounted(() => {
27. console.log(route)
28. })
30. return {
31. route,
32. ...toRefs(state)
33. }
34. },
35. })
36. </script>

views文件夹下的Home文件夹下的Lx.vue文件代码：

1. <template>
2. <div style="font-size: 14px;">
3. <h2>我是练习{{ title }}页面</h2>
4. <div>id:{{ id }}</div>
5. <div>props: {{ props }}</div>
6. <button @click="routerGoBack">返回上一页</button>
7. <br>
8. <button @click="routerGo('/home/lx/childA')">去子路由childA</button>
9. <!-- <router-view></router-view> -->
10. <router-view />
11. </div>
12. </template>
14. <script lang="ts">
15. import { defineComponent, onMounted, reactive, toRefs } from 'vue'
16. import { useRoute, useRouter } from 'vue-router'
18. // vue3.0语法
19. export default defineComponent({
20. name: 'Lx',
21. props: {
22. id: {
23. type: String,
24. default: ''
25. },
26. title: {
27. type: String,
28. default: ''
29. },
30. },
31. setup(props) {
32. const route = useRoute()
33. const router = useRouter()
34. const state: any = reactive({
35. id: '',
36. title: '',
37. routerGoBack: () => {
38. router.go(-1) // go(-1)回到上一个路由
39. // 也可以用router.replace('/home')跳回指定页
40. },
41. routerGo: (path) => {
42. router.push(path)
43. }
44. })
46. onMounted(() => {
47. console.log('lx route', route)
48. console.log('lx props', props)
49. if (route.query) {
50. state.id = route.query.id
51. state.title = route.query.title
52. }
53. })
55. return {
56. props,
57. ...toRefs(state)
58. }
59. },
60. })
61. </script>

views文件夹下的Home文件夹下的ChildA.vue文件代码：

1. <template>
2. <div style="font-size: 14px;background: skyblue;">
3. <h3>我是ChildA组件</h3>
4. <h3>route.query:{{ route.query }}</h3>
5. </div>
6. </template>
8. <script lang="ts">
9. import { defineComponent, onMounted, } from 'vue'
10. import { useRoute, useRouter } from 'vue-router'
11. // vue3.0语法
12. export default defineComponent({
13. name: 'ChildA',
14. setup() {
15. const router = useRouter()
16. const route = useRoute()
17. function goBack() {
18. router.go(-1)
19. }
20. onMounted(() => {
21. console.log(route)
22. })
23. // 可以在页面销毁前清除事件
24. // onUnmounted(() => {
25. // proxy.$mittBus.off('mittUserA')
26. // })
27. return {
28. route, goBack
29. }
30. },
31. })
32. </script>

初始页面效果：

先点击push跳转到/home/lxb页面>（嵌套一层的路由）页面效果：

嵌套一层的路由从原本/home跳入了/home/lxb 子路由页面，点击回到首页。

 再点击push跳转到/home/lx页面>（嵌套多层的路由）页面效果：

先去到了第一层/home/lx子路由页面，

再点击去子路由childA按钮>页面效果：

进到了嵌套的第二层/home/lx/childA子路由页面

点击可返回上一页/home/lx 再点击可回到/home首页。

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！