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

最新推荐文章于 2025-03-01 18:51:41 发布

俊哥前端工程师

最新推荐文章于 2025-03-01 18:51:41 发布

阅读量1.2w

点赞数 49

CC 4.0 BY-SA版权

分类专栏： vue相关语法文章标签： vue.js javascript 前端 typescript ecmascript chrome devtools es6

本文链接：https://blog.youkuaiyun.com/ForForever9/article/details/134763283

本文详细介绍了Vue3中嵌套路由的使用，包括如何通过createApp()方法实例化，以及新增的metaprop和routeprop特性。建议按功能模块分层，控制层级和路由数量以提高管理效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

import {
  createRouter,
  createWebHashHistory,
  RouteRecordRaw
} from "vue-router";
// createWebHashHistory,createWebHistory

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/Home/index.vue'),
    meta: {
      title: 'Home Page',
      roles: ['admin', 'admin1']
    },
    children: [
      {
        path: 'lx',
        name: 'Lx',
        component: () => import('@/views/Home/Lx.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: 'lxb/:id/:title', // 提前定义params参数（可以定义多个）
        name: 'Lxb',
        component: () => import('@/views/Home/Lxb.vue'),
      },
    ]
  },
]

export const router = createRouter({
  // 路由的history模式，共有三种模式，
  // createWebHistory、createWebHashHistory、createMemoryHistory
  history: createWebHashHistory(),// history: createWebHistory(),
  // 路由配置
  routes,
  // 是否严格匹配路由
  strict: true,
  // 路由跳转完成后，页面滚动行为
  scrollBehavior: () =>