Vue Router 核心原理与高频面试题解析

这会生成 /user/list 和 /user/:id 两个路径。关键点：如果子路由 path 以 / 开头，它将相对于根路径匹配，而不是父级路径。例如 { path: '/list' } 会匹配 /list 而非 /user/list。

路由懒加载

利用 import() 语法引入组件，配合 Webpack 等打包工具，将组件拆分为单独的 chunk 文件，按需加载。

const routes = [
  { path: '/user/:id', component: () => import('./User.vue') }
];

这能有效减少初始包体积，提升首屏加载速度。

配置 404 页面

在路由列表末尾添加通配符路由即可捕获未匹配的路径。

{ path: '*', component: NotFoundComponent }

路由钩子函数详解

Vue Router 提供了三类守卫：全局守卫、路由独享守卫和组件守卫。

• 全局守卫：router.beforeEach（导航前）、router.beforeResolve（解析前）、router.afterEach（导航后）。
• 路由独享守卫：在路由配置中定义 beforeEnter。
• 组件守卫：beforeRouteEnter（进入前）、beforeRouteUpdate（复用更新）、beforeRouteLeave（离开）。

这些守卫常用于权限验证、数据预加载或进度条控制。实际执行顺序如下：

1. 触发导航。
2. 失活组件调用 beforeRouteLeave。
3. 全局 beforeEach。
4. 复用组件调用 beforeRouteUpdate。
5. 路由配置中的 beforeEnter。
6. 解析异步组件（如 import()）。
7. 激活组件调用 beforeRouteEnter。
8. 全局 beforeResolve。
9. 导航确认。
10. 全局 afterEach。
11. DOM 更新。
12. beforeRouteEnter 回调执行，传入组件实例。

Hash 模式与 History 模式的区别

• Hash 模式（默认）：URL 包含 # 号（如 /home#about）。浏览器不会向服务器发送请求，兼容性好，但 URL 不够美观。
• History 模式：使用 HTML5 History API（如 /home），URL 简洁，但需要服务器配置支持，否则刷新可能报 404。

底层原理简析

Hash 路由

利用 # 号变化不刷新的特性，监听 hashchange 事件，提取哈希内容作为路由路径，匹配对应的组件进行渲染。

<!-- hash.html -->
<ul>
  <li><a href="#/home">首页</a></li>
  <li><a href="#/about">关于我们</a></li>
</ul>
<div id="routeView"></div>
<script>
const routes = [
  { path: '#/home', component: '首页' },
  { path: '#/about', component: '关于我们' }
];
const routeViewEl = document.querySelector('#routeView');
const onHashChange = () => {
  for (let i = 0; i < routes.length; i++) {
    if (routes[i].path === location.hash) {
      routeViewEl.innerHTML = routes[i].component;
      break;
    }
  }
};
window.addEventListener('hashchange', onHashChange);
window.addEventListener('DOMContentLoaded', onHashChange);
</script>

History 路由

基于 HTML5 History API (pushState, replaceState) 和 popstate 事件实现。

<!-- history.html -->
<ul>
  <li><a href="/home">首页</a></li>
  <li><a href="/about">关于我们</a></li>
</ul>
<div id="routeView"></div>
<script>
const routes = [
  { path: '/home', component: '首页' },
  { path: '/about', component: '关于我们' }
];
const routeViewEl = document.querySelector('#routeView');
const onPopState = () => {
  for (let i = 0; i < routes.length; i++) {
    if (routes[i].path === location.pathname) {
      routeViewEl.innerHTML = routes[i].component;
      break;
    }
  }
};
window.addEventListener('popstate', onPopState);
window.addEventListener('DOMContentLoaded', () => {
  const links = document.querySelectorAll('a');
  links.forEach((a) => {
    a.addEventListener('click', (e) => {
      e.preventDefault();
      history.pushState(null, '', a.getAttribute('href'));
      onPopState();
    });
  });
});
</script>

注意点：

1. 必须阻止 <a> 标签的默认跳转行为，否则会向服务器请求导致页面跳转。
2. 本地预览需启动服务器，因为 file:// 协议下无法使用 pushState，会抛出安全错误。

部署时的 404 问题

使用 History 模式部署到服务器后，刷新页面容易报 404。这是因为浏览器直接向服务器请求该 URL，而服务器找不到对应的物理文件。

解决方案：配置服务器将所有请求重定向到入口文件（如 index.html），由前端路由接管。

Nginx 配置示例：

location / {
  try_files $uri $uri/ /index.html;
}

路由参数变化但组件未更新的处理

当路由从 /user/1 跳转到 /user/2 时，组件可能被复用，生命周期钩子（如 created、mounted）不会重新执行，导致数据未刷新。

方案一：监听 $route

$route 是响应式对象，监听其变化可获取最新参数。

export default {
  watch: {
    '$route'(to, from) {
      if (to.params.id !== from.params.id) {
        this.users = await axios.get(`/api/user/${this.$route.params.id}`);
      }
    }
  }
};

方案二：使用 beforeRouteUpdate

这是组件内的导航守卫，仅在路由改变且组件被复用时调用。

export default {
  async beforeRouteUpdate(to, from, next) {
    this.users = await axios.get(`/api/user/${this.$route.params.id}`);
    next();
  }
};

方案三：强制重渲染

给 <router-view> 绑定 key 属性，使其在路径变化时彻底销毁重建。

<template>
  <router-view :key="$route.fullPath"></router-view>
</template>

以上涵盖了 Vue Router 的核心机制与常见面试考点，建议结合项目实践加深理解。