Vue2 Router 深度解析与实战指南

前言

Vue Router 是 Vue.js 官方的路由管理器，在构建多页面应用时扮演核心角色。本文将从基础原理到实战场景，逐步深入讲解 Vue2 中 Router 的使用技巧，并通过典型业务场景展示其强大功能。

一、基础概念与安装

1. 什么是 Vue Router？

Vue Router 是专为 Vue.js 设计的路由系统，支持：

嵌套路由
动态路由参数
路由守卫
模块化路由配置
懒加载组件

2. 安装与初始化

bash 复制代码

npm install vue-router@3.5.3  # 指定 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 严格验证参数格式。