Vue.js 路由入门：从零搭建单页应用的导航系统
在现代前端开发中，单页应用（SPA）已经成为主流模式。用户不再需要频繁刷新页面，而是通过动态加载内容实现“无缝切换”。而实现这种流畅体验的核心技术之一，就是 Vue.js 路由。它就像一座城市的交通导航系统，让你在不同的页面（视图）之间自由穿梭，而无需重新加载整个应用。
Vue.js 路由（Vue Router）是官方推荐的路由管理库，它让开发者可以轻松地为 Vue 应用添加多页面结构。无论你是初学者还是有一定经验的开发者，掌握它都是迈向专业前端开发的重要一步。
什么是 Vue.js 路由？它的核心作用是什么？
想象一下你正在驾驶一辆车，目的地是“市中心”。如果你没有导航，你可能会在街巷中迷路，甚至绕远路。而有了导航系统，它会告诉你“前方 500 米右转”，并实时更新路线。Vue.js 路由就是前端的“导航系统”——它根据 URL 的变化，自动匹配对应的组件并渲染，让你在不刷新页面的情况下切换内容。
它的核心作用有三个：
- 路径匹配：根据 URL 的路径（如 /home、/about）决定显示哪个组件。
- 视图渲染：动态加载并渲染对应的组件，实现无刷新跳转。
- 路由参数传递：支持在路径中传递参数，比如 /user/123，可以获取用户 ID。
Vue.js 路由不仅功能强大，而且使用简单。接下来我们一步步搭建一个完整的路由系统。
安装与初始化：开启 Vue.js 路由之旅
在开始之前，确保你已经安装了 Vue CLI 工具。如果没有，可以通过以下命令安装：
npm install -g @vue/cli
创建一个新的 Vue 项目：
vue create my-vue-app
cd my-vue-app
进入项目目录后，安装 Vue Router：
npm install vue-router@4
注意：Vue 3 推荐使用 Vue Router 4，它支持组合式 API 和更灵活的配置方式。
安装完成后，我们来创建路由配置文件。在 src 目录下新建一个文件：router/index.js。
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import User from '../views/User.vue'
// 创建路由实例
const router = createRouter({
// 使用 HTML5 History 模式，避免 URL 中出现 # 符号
history: createWebHistory(),
// 定义路由规则
routes: [
{
// 路径为 /，默认显示 Home 组件
path: '/',
name: 'Home',
component: Home
},
{
// 路径为 /about，显示 About 组件
path: '/about',
name: 'About',
component: About
},
{
// 路径为 /user/:id，支持动态参数
path: '/user/:id',
name: 'User',
component: User
}
]
})
// 导出路由实例，供 main.js 使用
export default router
注释说明：
createRouter：创建路由对象的核心方法。createWebHistory：使用浏览器的 History API，让 URL 更干净（无 #）。routes数组：定义所有可用的路由规则。path：URL 路径，与页面对应。component：当路径匹配时，要加载的 Vue 组件。name：路由的名称，便于编程式导航。
配置主应用：让 Vue.js 路由生效
现在路由已经配置好了，但还没“接入”主应用。我们需要在 main.js 中引入并使用它。
// src/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')
关键点：
app.use(router)是让 Vue 应用知道“我有路由系统了”，这样才能响应路径变化。
此时，你可以在 App.vue 中添加一个路由出口，用来显示匹配的组件：
<!-- src/App.vue -->
<template>
<div id="app">
<!-- 导航栏 -->
<nav>
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
<router-link to="/user/123">用户</router-link>
</nav>
<!-- 路由出口：匹配的组件会在这里渲染 -->
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
router-link是 Vue Router 提供的导航组件，它会生成<a>标签，但不会触发页面刷新。router-view是路由出口，所有匹配的组件都会在这里渲染。
动态路由与参数传递：让路由更智能
有时候，我们需要根据 URL 的不同部分来显示不同的内容。比如 /user/123 和 /user/456，都指向“用户详情”页面，但显示不同用户的信息。
Vue.js 路由支持动态路径参数。我们来改造一下之前的路由配置：
// src/router/index.js（更新部分）
{
path: '/user/:id',
name: 'User',
component: User
}
在 User.vue 组件中，可以通过 this.$route.params.id 获取参数：
<!-- src/views/User.vue -->
<template>
<div>
<h2>用户详情</h2>
<p>用户 ID：{{ userId }}</p>
<p>欢迎访问用户 {{ userId }} 的页面！</p>
</div>
</template>
<script>
export default {
name: 'User',
data() {
return {
userId: this.$route.params.id // 获取 URL 中的 id 参数
}
},
// 可选：监听参数变化
watch: {
'$route.params.id'(newId) {
this.userId = newId
}
}
}
</script>
注意：
this.$route是路由实例，params是参数对象。当 URL 变化时，组件会重新渲染，但不会重新创建。
如果你希望在参数变化时更精准地响应，还可以使用 beforeRouteUpdate 导航守卫（后续章节会讲）。
编程式导航：用代码控制跳转
除了使用 router-link，我们也可以通过 JavaScript 代码来跳转页面。这在表单提交、登录验证等场景中非常实用。
在组件中，可以通过 this.$router.push() 来实现跳转：
<!-- 示例：登录后跳转 -->
<template>
<button @click="login">登录</button>
</template>
<script>
export default {
methods: {
login() {
// 模拟登录成功后跳转到首页
this.$router.push('/')
}
}
}
</script>
你也可以传入对象来定义目标路径：
this.$router.push({ path: '/user/123' })
// 或者使用 name
this.$router.push({ name: 'User', params: { id: 123 } })
push方法会向浏览器历史栈添加一条记录，支持“后退”操作。
如果不想记录历史，可以用replace方法。
路由守卫：在跳转前做权限检查
在实际项目中，经常需要对某些页面进行权限控制。比如只有登录用户才能访问 /admin 页面。
Vue.js 路由提供了“守卫”机制，可以在跳转前、跳转中、跳转后执行逻辑。
全局前置守卫：全局拦截
// src/router/index.js
router.beforeEach((to, from, next) => {
// to: 即将进入的目标路由
// from: 当前离开的路由
// next: 必须调用，否则路由无法继续
const isAuthenticated = localStorage.getItem('isAuthenticated')
if (to.path === '/admin' && !isAuthenticated) {
// 如果访问 /admin 且未登录，则跳转到登录页
next('/login')
} else {
// 否则继续跳转
next()
}
})
这个守卫会在每次路由跳转前执行。
next()表示允许跳转，next('/login')表示强制跳转。
组件内守卫：针对特定组件
你也可以在组件内部定义守卫：
<script>
export default {
beforeRouteEnter(to, from, next) {
// 组件创建前执行
next(vm => {
// vm 是组件实例，可以访问 this
console.log('进入用户页面')
})
},
beforeRouteUpdate(to, from, next) {
// 路由参数变化时执行
console.log('用户 ID 变为：', to.params.id)
next()
}
}
</script>
总结：Vue.js 路由的核心价值
Vue.js 路由是构建现代单页应用的基石。它不仅让页面切换更流畅，还提供了参数传递、权限控制、动态路由等强大功能。从简单的路径匹配到复杂的守卫逻辑，它都能轻松应对。
对于初学者，建议先掌握路由的基本配置、router-link 和 router-view 的使用。随着项目复杂度提升，再逐步学习动态路由、守卫和懒加载等高级特性。
记住：一个优秀的前端应用，不仅要有漂亮的界面，更要有清晰的导航逻辑。Vue.js 路由，就是你实现这一目标的最佳伙伴。
当你熟练掌握它后，你会发现，开发一个“像原生 App 一样流畅”的网页应用，其实并没有那么难。