前言
前面我们学完了 Vue3 所有核心语法：组合式API、响应式、生命周期、计算属性、侦听器、组件通信。
但这些只能写单页面组件。
真正的企业项目、官网、后台管理系统，全部都是 多页面跳转、路由切换。
想要搭建完整 Vue 工程项目，必须掌握：Vue Router 路由。
路由是 Vue 工程化的核心骨架，负责页面跳转、权限控制、菜单匹配、页面渲染，是进阶必备技能。
一、路由是什么？（面试满分定义）
Vue Router 是 Vue 官方的单页面路由管理器。
传统网页跳转是「刷新页面、请求新页面」，单页应用路由是：不刷新浏览器，通过JS动态替换页面组件。
核心价值：
-
实现无刷新页面跳转（SPA单页应用）
-
URL地址对应页面组件
-
实现前进、后退、刷新页面不丢失状态
-
统一项目页面架构
二、Vue Router 安装与基础配置
1. 安装路由（Vue3 对应 router4.x）
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(), // history模式（无#） routes }) export default router
3. 全局挂载路由
main.js 引入挂载，全局生效
import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app')
三、路由出口（必须配置）
<router-view>：页面组件渲染的位置，没有出口页面无法显示
<template> <div class="app"> <!-- 路由导航栏 --> <router-link to="/">首页</router-link> <router-link to="/about">关于我们</router-link> <!-- 路由出口，页面在这里渲染 --> <router-view></router-view> </div> </template>
四、两种跳转方式（项目100%高频）
1. 声明式导航：router-link（标签跳转）
适合菜单、固定导航，无需JS，自动高亮、阻止默认刷新。
<router-link to="/">首页</router-link>
2. 编程式导航：useRouter（JS跳转）
适合按钮点击、接口回调、条件判断后跳转，企业业务最常用。
<script setup> import { useRouter } from 'vue-router' const router = useRouter() const goAbout = () => { router.push('/about') } </script>
五、路由传参两种方案（必考+必用）
1. query传参（问号参数、刷新不丢失）
类似 get 请求参数，地址栏可见，刷新页面参数保留。
// 跳转传参 router.push({ path: '/detail', query: { id: 1001, title: '文章标题' } }) // 接收参数 import { useRoute } from 'vue-router' const route = useRoute() console.log(route.query.id)
2. params传参（动态路由、隐式参数）
参数隐藏、地址栏简洁，需要配置动态路由规则。
// 路由规则配置 { path: '/detail/:id', name: 'Detail', component: () => import('@/views/Detail.vue') } // 跳转 router.push({ name: 'Detail', params: { id: 1001 } }) // 接收 console.log(route.params.id)
六、路由模式区别（面试高频）
1. history 模式
地址干净无 #，需要后端配置兜底，否则刷新404。
2. hash 模式
地址带 #，无需后端配置，兼容性好，适合纯静态项目。
七、本篇结语
本篇完成了 Vue Router 零基础入门，掌握了路由核心用法、跳转、传参、模式区别。
从此你的项目不再是单页静态页面，而是真正的多页面工程化项目。
下一篇我们进阶 企业级路由架构：路由懒加载、嵌套路由、路由守卫、权限控制，直接对标中后台企业项目标准。