VUE3入门教程：路由与导航

在Vue 3的项目开发中，路由与导航是实现单页面应用（SPA）页面切换与交互的关键部分。掌握它们，能让你的Vue应用拥有流畅的用户体验。

Vue Router是Vue.js官方的路由管理器，在Vue 3项目中使用它，首先要进行安装与配置。在项目目录下，通过命令行执行 npm install vue-router@next 来安装最新版本的Vue Router。安装完成后，在项目的 src 目录下创建 router 文件夹，并在其中新建 index.js 文件。

在 index.js 中，引入 createRouter 和 createWebHistory。createWebHistory 用于创建浏览器历史记录模式的路由，适合大多数Web应用场景。例如：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

这里定义了两个路由，path 是路径，name 是路由名称，component 是对应的组件。使用 import() 动态导入组件，可实现代码分割，提高应用加载速度。

在Vue组件中进行导航，最常见的方式是使用 <router - link> 组件。比如在模板中：

<template>
  <div>
    <router - link to="/">首页</router - link>
    <router - link to="/about">关于</router - link>
  </div>
</template>

<router - link> 的 to 属性指定目标路由路径，点击它就能实现页面跳转。

另外，还可以在JavaScript代码中使用编程式导航。在组件的方法中：

import { useRouter } from 'vue-router'

export default {
  methods: {
    goToAbout() {
      const router = useRouter()
      router.push('/about')
    }
  }
}

通过 useRouter 钩子函数获取路由实例，然后使用 push 方法实现导航。

理解并熟练运用Vue 3的路由与导航，能让你在构建单页面应用时更加得心应手，为用户打造出交互性强、体验良好的应用程序。