Vue2 Router 深度解析与实战指南
前言
Vue Router 是 Vue.js 官方的路由管理器，在构建多页面应用时扮演核心角色。本文将从基础原理到实战场景，逐步深入讲解 Vue2 中 Router 的使用技巧，并通过典型业务场景展示其强大功能。
一、基础概念与安装
1. 什么是 Vue Router？
Vue Router 是专为 Vue.js 设计的路由系统，支持：
- 嵌套路由
- 动态路由参数
- 路由守卫
- 模块化路由配置
- 懒加载组件
2. 安装与初始化
bash
npm install [email protected] # 指定 Vue2 兼容版本
javascript
// main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import routes from './routes'; // 集中管理路由表
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history', // 取消 URL 中的 # 符号
base: process.env.BASE_URL, // 部署路径
routes // 路由表配置
});
new Vue({
render: h => h(App),
router // 注入路由实例
}).$mount('#app');二、基础用法与动态路由
1. 配置路由表
javascript
// routes/index.js
export default [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue') // 懒加载首页组件
},
{
path: '/about',
name: 'About',
component: () => import('@/views/About.vue')
},
{
path: '/user/:id', // 动态参数 :id
name: 'User',
component: () => import('@/views/User.vue'),
props: true // 将参数作为 prop 传递给组件
}
];2. 动态路由匹配
vue
<!-- User.vue -->
<template>
<div>
<h2>用户 ID：{{ userId }}</h2>
<p>用户详情：{{ userData }}</p >
</div>
</template>
<script>
export default {
props: ['id'], // 接收路由参数
data() {
return {
userData: null,
userId: this.id // 直接通过 props 获取参数
};
},
created() {
// 模拟 API 请求
setTimeout(() => {
this.userData = `姓名：张三（ID：${this.userId}）`;
}, 1000);
}
};
</script>访问路径 ：/user/123
组件输出：用户 ID：123（模拟异步获取数据）
三、嵌套路由与布局
场景：后台管理系统布局
javascript
// routes/admin.js
export default [
{
path: '/admin',
name: 'Admin',
component: () => import('@/views/Admin.vue'), // 主布局组件
children: [
{
path: '', // 默认子路由
name: 'Dashboard',
component: () => import('@/views/AdminDashboard.vue')
},
{
path: 'users', // /admin/users
name: 'UserList',
component: () => import('@/views/AdminUserList.vue')
},
{
path: 'settings', // /admin/settings
name: 'Settings',
component: () => import('@/views/AdminSettings.vue')
}
]
}
];
vue
<!-- Admin.vue -->
<template>
<div>
<nav>
<ul>
<li><router-link to="/admin">仪表盘</router-link></li>
<li><router-link to="/admin/users">用户管理</router-link></li>
<li><router-link to="/admin/settings">系统设置</router-link></li>
</ul>
</nav>
<main>
<router-view></router-view> <!-- 嵌套内容区域 -->
</main>
</div>
</template>特点：
<router-view>显示当前匹配的子路由组件- 通过
children数组定义嵌套路由 - 父组件提供公共布局（如导航栏）
四、路由守卫与权限控制
1. 导航守卫实战（用户认证）
javascript
// router/index.js
router.beforeEach((to, from, next) => {
const isAuthenticated = false; // 假设未登录状态
const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
if (requiresAuth && !isAuthenticated) {
next({ name: 'Login', query: { redirect: to.fullPath } }); // 重定向到登录页
} else {
next(); // 放行
}
});
javascript
// 配置路由元信息
{
path: '/protected',
name: 'Protected',
component: () => import('@/views/Protected.vue'),
meta: { requiresAuth: true } // 标记需要授权
}2. 后置钩子与组件内守卫
javascript
// 在组件内监听路由变化
export default {
watch: {
$route(to, from) {
console.log(`从 ${from.path} 导航到 ${to.path}`);
// 可处理参数变化或触发数据刷新
}
},
beforeRouteLeave(to, from, next) {
if (this.hasUnsavedChanges) {
const answer = window.confirm('有未保存的更改，确定离开吗？');
next(answer); // 阻止或放行导航
} else {
next();
}
}
};五、进阶技巧与最佳实践
1. 动态添加路由（权限控制场景）
javascript
// 根据用户角色动态生成路由
const roles = ['admin', 'editor']; // 假设从 API 获取
const dynamicRoutes = roles.map(role => ({
path: `/${role}`,
name: role,
component: () => import(`@/views/${role}.vue`)
}));
const router = new VueRouter({
routes: [...defaultRoutes, ...dynamicRoutes] // 合并静态与动态路由
});2. 路由懒加载与性能优化
javascript
// 推荐写法：按需加载组件
const routes = [
{
path: '/async',
component: () => import(/* webpackChunkName: "async-chunk" */ './components/AsyncComponent.vue')
}
];3. 404 页面与错误处理
javascript
// 配置兜底路由
{
path: '*', // 匹配所有未定义路径
name: 'NotFound',
component: () => import('@/views/404.vue')
}六、总结与最佳实践
- 路由表集中管理：将所有路由定义放在独立文件，便于维护和扩展。
- 模块化路由配置 ：按功能模块拆分路由文件（如
admin.js、user.js）。 - 避免过度嵌套：嵌套路由层级建议不超过 3 层，防止逻辑混乱。
- 统一权限控制 ：通过路由元信息（
meta）和全局守卫集中处理权限。 - 路径参数校验 ：使用正则表达式或
props严格验证参数格式。