Vue Router

下面，我们来系统的梳理关于 Vue Router 的基本知识点：

---

一、Vue Router 概述

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。核心功能包括：

• 嵌套路由映射
• 模块化的路由配置
• 路由参数、查询和通配符
• 导航守卫（权限控制）
• HTML5 history 模式或 hash 模式
• 自定义滚动行为

安装：

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

二、核心概念

1. 路由配置

创建路由实例并定义路由映射：

// router/index.js
import {
    createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
   
    path: '/',
    name: 'Home',
    component: () => import('../views/HomeView.vue')
  },
  {
   
    path: '/about',
    name: 'About',
    component: () => import('../views/AboutView.vue')
  },
  {
   
    path: '/user/:id',
    name: 'UserProfile',
    component: () => import('../views/UserView.vue'),
    props: true // 将路由参数作为 props 传递
  }
]

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

export default router

2. 路由视图

在根组件中使用 和 ：

3. 路由模式

• Hash 模式：createWeb