Vue3 中如何使用 Vue Router

在Vue3的项目开发中，Vue Router扮演着至关重要的角色，它负责实现单页面应用的路由功能，为用户提供流畅的页面导航体验。以下将详细介绍Vue3中如何使用Vue Router。

确保已经安装了Vue Router。在创建Vue3项目时，可以选择集成Vue Router。若项目已创建，可通过npm install vue-router@next命令进行安装。

安装完成后，需要进行Vue Router的基本配置。在项目的src目录下，创建一个router文件夹，并在其中新建index.js文件。在这个文件中，引入Vue Router并创建路由实例。例如：

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

上述代码中，首先从vue-router中导入了createRouter和createWebHistory。createWebHistory用于创建基于HTML5 History API的路由历史记录对象。接着定义了一个routes数组，每个元素代表一个路由配置对象，包含路径、名称和对应的组件。最后，通过createRouter创建路由实例，并将其导出。

在Vue3的入口文件main.js中，需要引入并使用刚刚创建的路由实例：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

这样，Vue Router就与Vue应用集成完成。

在组件中，可以使用标签实现页面跳转，例如：

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

组件用于显示当前路径对应的组件内容，通常在App.vue中使用：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

掌握Vue3中Vue Router的使用方法，能有效提升单页面应用的开发效率，实现丰富的路由功能，为用户打造更好的交互体验。