VUE3基础教程 路由和导航

前言

本文将为大家介绍 Vue3 路由和导航的基础教程。Vue Router 是 Vue.js 官方路由管理器。它与 Vue.js 核心深度集成，让构建单页面应用变得易如反掌。而在Vue3中，Vite更是为我们提供了可选的适用于Vue3的原生ESM构建，构建速度飞快，也更加符合标准。

路由的基本配置

在 Vue.js 中，可以通过 Vue Router 轻松构建一个具有基本导航功能的单页应用。下面是一个简单的 Vue Router 示例：

    // 引入路由组件
    import { createRouter, createWebHistory } from 'vue-router'
    import Home from './views/Home.vue'
    import About from './views/About.vue'

    // 定义路由规则
    const routes = [
      { path: '/', component: Home },
      { path: '/about', component: About },
    ]

    // 创建路由实例
    const router = createRouter({
      history: createWebHistory(),
      routes,
    })

    // 配置到Vue3实例
    const app = createApp(App)
    app.use(router)
    app.mount('#app')
  

路由传参

路由传参是指在路由跳转过程中，将一些数据传递给目标组件。通过路由参数，我们可以方便地获取 URL 中的参数，然后将其传递给目标组件。下面是一个简单的路由传参示例：

    // 从路由中获取参数
    const router = createRouter({
      history: createWebHistory(),
      routes: [
        {
          path: '/user/:id',
          component: User,
          props: true
        }
      ]
    })
    // 或者
    const router = createRouter({
      history: createWebHistory(),
      routes: [
        {
          path: '/user/:id',
          component: User,
          props: (route) => ({ id: route.params.id })
        }
      ]
    })
  

路由嵌套和命名视图

当一个页面需要分隔为多个块，并且每个块都有一个对应的路由视图时，命名视图非常有用。通过命名视图，我们可以有选择地渲染某个组件的一部分。下面是一个简单的路由嵌套和命名视图示例：

    const router = createRouter({
      history: createWebHistory(),
      routes: [
        {
          path: '/',
          components: {
            default: Home,
            a: A,
            b: B
          }
        }
      ]
    })

    // 或者
    const router = createRouter({
      history: createWebHistory(),
      routes: [
        {
          path: '/',
          component: Home,
          children: [
            {
              path: '',
              component: A,
              name: 'a'
            },
            {
              path: 'b',
              components: { default: B, c: C },
              name: 'b'
            }
          ]
        }
      ]
    })
  

总结

Vue3 路由和导航是一个非常重要的内容，合理的使用路由可以方便我们进行 SPA 页面的开发，同时也可以使得页面的切换更加顺畅自然。本文主要介绍了路由的基本配置、路由传参、路由嵌套和命名视图等几个方面。同时，我们也向大家介绍了一些 Vue3 中的新特性，如果您需要更加全面地了解 Vue3，欢迎参考 Vue3 官方文档。