开会员与付费前请必须阅读这篇文章，在首页置顶第一篇：（进站必看本站VIP介绍/购买须知）
本站所有源码均为自动秒发货，默认（百度网盘）
本站所有源码均为自动秒发货，默认（百度网盘）
Vue Router 是 Vue.js 官方的路由管理器，它的核心作用是实现单页应用（SPA）中视图组件与 URL 路径之间的映射关系，从而在不刷新页面的情况下，根据 URL 的变化动态切换和渲染不同的组件。
它提供了以下核心功能：
- 嵌套路由/视图：支持多层级的路由结构。
- 模块化路由配置：可以将路由配置拆分到不同模块。
- 路由参数、查询、通配符：灵活处理动态路径。
- 编程式导航：通过代码（如
router.push）控制跳转。 - 路由守卫：在路由跳转前、后或组件内执行逻辑（常用于权限验证）。
- 自动激活 CSS 类名：根据当前路由自动给链接添加样式。
Vue Router 的基本使用步骤 (以 Vue 3 + Vue Router 4 为例)
以下是创建一个基本路由应用的标准化流程：
1. 安装 Vue Router
在你的项目目录下运行：
bash
编辑
1npm install vue-router@4
2# 或者
3yarn add vue-router@42. 定义路由组件
首先准备好需要展示的页面组件（例如
Home.vue 和 About.vue）。3. 创建路由实例 (router/index.js 或 src/router.js)
引入 Vue Router 和组件，定义路由规则，并创建 router 实例。
javascript
编辑
1// src/router/index.js
2import { createRouter, createWebHistory } from 'vue-router'
3// 引入组件
4import Home from '../views/Home.vue'
5import About from '../views/About.vue'
6
7// 定义路由数组
8const routes = [
9 {
10 path: '/',
11 name: 'Home',
12 component: Home
13 },
14 {
15 path: '/about',
16 name: 'About',
17 component: About
18 }
19]
20
21// 创建路由实例
22const router = createRouter({
23 // 创建历史模式（还有 createWebHashHistory 可选）
24 history: createWebHistory(),
25 routes
26})
27
28export default router4. 挂载路由到 Vue 应用 (main.js)
将创建的 router 实例传递给 Vue 应用。
javascript
编辑
1// src/main.js
2import { createApp } from 'vue'
3import App from './App.vue'
4import router from './router' // 引入 router
5
6const app = createApp(App)
7
8app.use(router) // 挂载 router
9
10app.mount('#app')5. 在模板中使用路由
在
App.vue 或其他布局组件中，使用 <router-link> 进行导航，使用 <router-view> 作为出口渲染匹配到的组件。html
预览
1<!-- src/App.vue -->
2<template>
3 <nav>
4 <!-- 声明式导航，渲染为 <a> 标签 -->
5 <router-link to="/">首页</router-link> |
6 <router-link to="/about">关于</router-link>
7 </nav>
8
9 <!-- 路由出口：匹配到的组件将渲染在这里 -->
10 <router-view />
11</template>6. (可选) 编程式导航
在组件逻辑中（如按钮点击事件），可以使用
useRouter 钩子进行跳转：javascript
编辑
1<script setup>
2import { useRouter } from 'vue-router'
3
4const router = useRouter()
5
6function goToAbout() {
7 router.push('/about') // 跳转到 about 页面
8}
9</script>总结
Vue Router 的核心在于管理 URL 状态并驱动视图更新。基本步骤概括为：安装 -> 定义路由表 -> 创建实例 -> 挂载应用 -> 使用
<router-link> 和 <router-view>。
