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

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: () =>
### Vue3使用 vue-router 实现多页面路由跳转 #### 安装与初始化 为了在项目中使用 `vue-router`,需要先通过 npm 或 yarn 进行安装: ```bash npm install vue-router@next --save ``` 或者 ```bash yarn add vue-router@next ``` 完成安装之后,在项目的入口文件(通常是 main.js 或者 main.ts)引入并创建路由器实例。 #### 创建 Router 实例 定义好所有的路由规则,并将其传递给 createRouter 函数来创建一个新的路由器对象。这里展示了一个简单的例子[^1]: ```javascript import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; // 导入createRouter 和 createWebHistory 方法 import { createRouter, createWebHistory } from &#39;vue-router&#39; const routes = [ { path: &#39;/&#39;, name: &#39;Home&#39;, component: () => import(&#39;./views/HomeView.vue&#39;) }, { path: &#39;/about&#39;, name: &#39;About&#39;, // 路由懒加载 component: () => import(&#39;./views/AboutView.vue&#39;) } ] const router = createRouter({ history: createWebHistory(), routes, }) const app = createApp(App) app.use(router).mount(&#39;#app&#39;) ``` 这段代码展示了如何设置基本的路由表以及怎样把它们挂载到应用程序上。注意这里的按需加载方式可以有效减少初始包体积大小。 #### 配置路径与组件映射关系 上述示例中的 `routes` 数组包含了两个对象,分别代表不同的页面及其对应的视图组件。每个对象都有三个属性:path (URL 地址), name (唯一标识符),component (要渲染的内容)。 对于更复杂的场景,比如带有参数或多级嵌套的情况,可以在 route 对象里进一步扩展配置项。例如,当涉及到动态匹配部分 URL 参数时,可以通过冒号前缀的方式指定占位符;而对于子路由,则可以直接向父级路由下添加 children 字段即可。 #### 页面间导航 一旦设置了合适的路由规则后,就可以利用 `<router-link>` 组件来进行页面间的平滑过渡了。此标签会自动生成相应的 HTML 锚点元素,并且内部处理好了点击事件以触发正确的视图更新逻辑[^2]。 ```html <template> <div id="nav"> <router-link to="/">首页</router-link> | <router-link :to="{name:&#39;About&#39;}">关于</router-link> </div> <!-- 渲染当前激活的 view --> <router-view></router-view> </template> ``` 以上模板片段演示了两种不同类型的链接写法——一种是指定绝对路径字符串作为目标位置,另一种则是借助编程式的命名路由语法传参过去。 #### 处理加载状态 考虑到用户体验方面的需求,通常会在每次切换新页面之前显示一个短暂的 loading 提示框直到数据完全准备好为止。这可以通过监听全局钩子函数 beforeResolve 来实现: ```javascript router.beforeResolve((to, from, next) => { // 显示加载指示器... const matchedComponents = [] ;[].concat.apply([], to.matched.map(record => record.components)).forEach(component => { if (component.preFetch){ matchedComponents.push(component); } }); Promise.all(matchedComponents.map(c => c.preFetch())).then(() => { // 关闭加载指示器... next(); }); }); ``` 该回调接收三个参数分别是即将进入的目标页(to)、离开的源页面(from)还有继续执行后续操作所需的 next() 方法调用。在这个地方可以根据实际情况决定何时开启关闭进度条动画效果等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值