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',</