Vue-Router4使用详解（结合Vue3）

在 Vue3 中使用 vue-router4（Vue Router 的最新版本，适配 Vue3）需要遵循以下步骤，涵盖安装、配置、基础使用及高级特性：

一、安装 vue-router4

确保项目基于 Vue3，通过包管理器安装：

# npm
npm install vue-router@4# yarn
yarn add vue-router@4

二、基本配置步骤

1. 创建路由文件（推荐 src/router/index.js）

import {createRouter,createWebHistory
} from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/home',name: 'home',component: () => import("@/views/Home.vue"),},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import('@/views/About.vue'),},],
})export default router

2. 在 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')

3. 在组件中使用路由

在根组件（如 App.vue）中添加路由出口和导航：

<template><!-- 导航链接（替代 <a> 标签，避免页面刷新） --><