Vue 路由（Vue Router）是 Vue.js 官方提供的路由管理工具，用于构建单页面应用（SPA，Single Page Application）。路由的作用是根据用户访问的 URL 地址，动态切换组件或页面内容

Vue Router 核心功能：

  • 在单页面应用中实现页面导航

  • 根据 URL 动态加载对应的组件

  • 支持浏览器前进、后退等功能

  • 提供路由守卫用于权限控制和数据预加载

使用

  1. 安装 Vue Router：在 Vue 项目中安装 Vue Router
1
npm install vue-router@4 # 如果是 Vue2 请使用 vue-router@3

基本概念

路由（Route）

路由 Route 定义了 URL 与组件之间的映射关系

语法：

1
2
3
4
const routes = [
  { path: '/', component: Home }, // 当访问 '/' 时显示 Home 组件
  { path: '/about', component: About } // 当访问 '/about' 时显示 About 组件
]

路由器（Router）

路由器 Router 是路由管理的核心对象，用于配置路由规则并控制导航

创建路由器：

1
2
3
4
5
6
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(), // 使用 HTML5 历史模式
  routes, // 路由规则
})

导航（Navigation）

使用 <router-link> 或编程方式（如 router.push）进行页面跳转