面试题：Vue Router 的核心实现原理是什么？

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页应用（SPA）。它的核心实现原理主要包括以下几个方面：

1. 路由模式

Vue Router 支持三种路由模式：

Hash 模式：使用 URL 的 hash（#）来模拟完整的 URL。
- 示例：http://example.com/#/home
- 原理：通过监听 hashchange 事件实现路由切换。
History 模式：使用 HTML5 History API（pushState、replaceState）来实现无 # 的 URL。
- 示例：http://example.com/home
- 原理：通过监听 popstate 事件实现路由切换。
Abstract 模式：用于非浏览器环境（如 Node.js）。

2. 路由映射

Vue Router 通过路由配置将 URL 映射到对应的组件。

示例

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

说明

path：URL 路径。
component：对应的组件。

3. 路由匹配

Vue Router 使用 路径解析 和 动态路由 来匹配 URL。

动态路由

const routes = [
  { path: '/user/:id', component: User }
];

说明

:id：动态路径参数，可以通过 this.$route.params.id 访问。

4. 路由视图

Vue Router 通过 <router-view> 组件渲染匹配的组件。

示例

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

说明

<router-view> 是一个占位符，用于渲染匹配的组件。

5. 导航守卫

Vue Router 提供了导航守卫，用于在路由切换前后执行逻辑。

全局守卫

router.beforeEach((to, from, next) => {
  console.log('全局前置守卫');
  next();
});

router.afterEach((to, from) => {
  console.log('全局后置守卫');
});

路由独享守卫

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      console.log('路由独享守卫');
      next();
    }
  }
];

组件内守卫

export default {
  beforeRouteEnter(to, from, next) {
    console.log('组件进入前');
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log('组件离开前');
    next();
  }
};

6. 路由懒加载

Vue Router 支持路由懒加载，优化初始加载性能。

示例

const routes = [
  {
    path: '/home',
    component: () => import('./views/Home.vue')
  }
];

说明

使用 import() 动态导入组件，实现按需加载。

7. 核心实现原理

Vue Router 的核心实现原理可以分为以下几个部分：

（1）路由模式

Hash 模式：通过 window.location.hash 和 hashchange 事件实现路由切换。
History 模式：通过 history.pushState 和 popstate 事件实现路由切换。

（2）路由匹配

Vue Router 使用 路径解析器 将 URL 路径解析为路由记录。
支持动态路由、嵌套路由和通配符路由。

（3）路由视图

<router-view> 是一个函数式组件，根据当前路由匹配的组件动态渲染。

（4）导航守卫

导航守卫通过钩子函数实现，支持全局、路由独享和组件内守卫。

（5）路由懒加载

使用 import() 动态导入组件，结合 Webpack 的代码分割功能实现懒加载。

8. 源码解析（简化版）

以下是 Vue Router 的核心实现逻辑（简化版）：

（1）路由模式

class HashHistory {
  constructor(router) {
    this.router = router;
    window.addEventListener('hashchange', () => {
      this.transitionTo(window.location.hash.slice(1));
    });
  }

  transitionTo(location) {
    const route = this.router.match(location);
    this.router.current = route;
  }
}

（2）路由匹配

class Router {
  constructor(routes) {
    this.routes = routes;
    this.current = null;
  }

  match(location) {
    for (const route of this.routes) {
      if (route.path === location) {
        return route;
      }
    }
    return null;
  }
}

（3）路由视图

const RouterView = {
  functional: true,
  render(h, { parent }) {
    const route = parent.$route;
    const matched = route.matched;
    if (!matched) return h();
    return h(matched.components.default);
  }
};

（4）导航守卫

class Router {
  constructor(routes) {
    this.beforeHooks = [];
  }

  beforeEach(fn) {
    this.beforeHooks.push(fn);
  }

  transitionTo(location) {
    const route = this.match(location);
    this.runQueue(this.beforeHooks, () => {
      this.current = route;
    });
  }

  runQueue(queue, cb) {
    const next = () => {
      if (queue.length === 0) return cb();
      const hook = queue.shift();
      hook(this.current, this.current, next);
    };
    next();
  }
}