Vue3 Router 使用指南：从基础到高级用法

前言

Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，让构建单页面应用变得轻而易举。Vue3 中的 Vue Router 4.x 版本带来了一些新的特性和改进。本文将全面介绍 Vue3 Router 的使用方法，包括基础配置和高级用法。

一、基础安装与配置

1. 安装 Vue Router

npm install vue-router@4

2. 基本路由配置

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
]const router = createRouter({history: createWebHistory(),routes
})export default router

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

4. 基本使用

在模板中使用 和 ：

<template><div><router-link to="/">Home</router-link><router-link to="/about">About</router-link><router-view></router-view></div>
</template>

二、路由导航

1. 编程式导航

// 字符串路径
router.push('/about')// 带有路径的对象
router.push({ path: '/about' })// 命名的路由，并加上参数
router.push({ name: 'About' })// 带查询参数，结果是 /about?name=test
router.push({ path: '/about', query: { name: 'test' } })// 带 hash，结果是 /about#section
router.push({ path: '/about', hash: '#section' })

2. 替换当前位置

router.push({ path: '/about',</