详细阐述 Vue Router 的路由模式（Hash, History, Abstract）及其实现原理。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

早上好，各位前端老铁们，今天咱们不聊妹子，聊点正经的——Vue Router 的路由模式。作为Vue.js生态中不可或缺的一部分，Vue Router 承担着构建单页应用（SPA）的核心任务：管理页面间的跳转和状态。

很多时候，我们只是"会用" Vue Router，但对其背后的运行机制，特别是不同路由模式的区别和实现原理，却知之甚少。今天，我就来扒一扒 Vue Router 的底裤，让大家对它有个更深入的了解。

我们重点讲解三种路由模式：Hash 模式、History 模式和 Abstract 模式。

一、路由模式概览

首先，我们用一个表格来简单概括一下这三种模式的特性：

模式	URL 特点	兼容性	是否需要服务器配置	优点	缺点
Hash	URL 包含 `#` 符号，例如：`/#/users`	兼容性最好	不需要	兼容性好，配置简单	URL 不美观，对 SEO 不友好
History	URL 符合正常 URL 格式，例如：`/users`	较好	需要	URL 美观，符合用户习惯，有利于 SEO	依赖浏览器 API，需要服务器配置，刷新页面可能出现 404
Abstract	不依赖浏览器环境，适用于非浏览器环境，例如：Node.js	最好	不需要	适用于非浏览器环境，例如服务器端渲染（SSR）、测试环境	只能通过 JavaScript 模拟路由行为，不能直接通过修改 URL 跳转

二、Hash 模式

Hash 模式是 Vue Router 默认的路由模式，也是最简单粗暴的一种。它的核心原理是利用 URL 中的 # 符号（hash）来模拟路由。

2.1 Hash 模式的实现原理

当 URL 中 # 后面的值发生变化时，浏览器并不会向服务器发起请求，而是会触发 hashchange 事件。Vue Router 监听这个事件，解析 # 后面的值，然后更新页面上的内容，从而实现路由的切换。

简单来说，# 就像一个锚点，它后面的内容只是客户端自己玩的游戏，服务器并不关心。

2.2 Hash 模式的代码实现

下面是一个简单的 Hash 路由的实现例子：

class HashRouter {
  constructor() {
    this.routes = {}; // 存储路由规则
    this.currentRoute = ''; // 当前路由
    window.addEventListener('hashchange', this.onRouteChange.bind(this));
    window.addEventListener('load', this.onRouteChange.bind(this)); // 页面加载时也要执行一次
  }

  // 注册路由
  route(path, callback) {
    this.routes[path] = callback;
  }

  // 更新视图
  onRouteChange() {
    this.currentRoute = location.hash.slice(1) || '/'; // 去掉 # 号
    if (this.routes[this.currentRoute]) {
      this.routes[this.currentRoute]();
    } else {
      // 处理 404 情况，可以显示一个 404 页面
      console.warn(`Route ${this.currentRoute} not found.`);
    }
  }

  // 跳转路由
  push(path) {
    location.hash = path;
  }
}

// 使用示例
const router = new HashRouter();

router.route('/', () => {
  document.body.innerHTML = '<h1>Home Page</h1>';
});

router.route('/about', () => {
  document.body.innerHTML = '<h1>About Page</h1>';
});

router.route('/users', () => {
  document.body.innerHTML = '<h1>Users Page</h1>';
});

// 模拟路由跳转
// router.push('/about');

代码解释：

HashRouter 类: 封装了 Hash 路由的核心逻辑。
constructor: 构造函数，初始化路由规则、当前路由，并监听 hashchange 和 load 事件。
route: 注册路由，将路径和对应的回调函数存储在 routes 对象中。
onRouteChange: 路由变化时的处理函数，获取当前路由，执行对应的回调函数。
push: 跳转路由，修改 location.hash 的值。

2.3 Hash 模式的优缺点

优点:
- 兼容性好，几乎所有浏览器都支持。
- 配置简单，不需要服务器端特殊配置。
缺点:
- URL 中包含 # 符号，不美观。
- 对 SEO 不友好，搜索引擎通常会忽略 # 后面的内容。

三、History 模式

History 模式是 Vue Router 官方推荐的路由模式，它利用 HTML5 History API 来实现路由的切换，可以让 URL 看起来更像是正常的 URL。

3.1 History 模式的实现原理

HTML5 History API 提供了 pushState 和 replaceState 方法，可以在不刷新页面的情况下修改 URL。Vue Router 利用这两个方法来改变 URL，并监听 popstate 事件来感知 URL 的变化。

pushState: 在历史记录中添加一个新的条目。
replaceState: 替换当前的记录。
popstate: 当用户点击浏览器的前进或后退按钮时触发。

3.2 History 模式的代码实现

class HistoryRouter {
  constructor() {
    this.routes = {};
    this.currentRoute = '';
    window.addEventListener('popstate', this.onRouteChange.bind(this));
    window.addEventListener('load', this.onRouteChange.bind(this)); // 页面加载时也要执行一次
  }

  route(path, callback) {
    this.routes[path] = callback;
  }

  onRouteChange() {
    this.currentRoute = location.pathname;
    if (this.routes[this.currentRoute]) {
      this.routes[this.currentRoute]();
    } else {
      // 处理 404 情况
      console.warn(`Route ${this.currentRoute} not found.`);
    }
  }

  push(path) {
    history.pushState({ path: path }, null, path); // 使用 pushState 修改 URL
    this.onRouteChange(); // 手动触发路由更新
  }

  replace(path) {
      history.replaceState({path: path}, null, path);
      this.onRouteChange();
  }
}

// 使用示例
const router = new HistoryRouter();

router.route('/', () => {
  document.body.innerHTML = '<h1>Home Page</h1>';
});

router.route('/about', () => {
  document.body.innerHTML = '<h1>About Page</h1>';
});

router.route('/users', () => {
  document.body.innerHTML = '<h1>Users Page</h1>';
});

// 模拟路由跳转
// router.push('/about');

代码解释：

pushState: 使用 history.pushState 修改 URL，第一个参数是一个状态对象，可以传递一些数据，第二个参数是页面的标题（通常设置为 null），第三个参数是新的 URL。
popstate: 监听 popstate 事件，当用户点击浏览器的前进或后退按钮时触发。
replace: 使用 history.replaceState 替换当前 URL, 同样需要手动触发onRouteChange方法。

3.3 History 模式的注意事项

服务器端配置: History 模式需要服务器端配置，否则刷新页面时可能会出现 404 错误。因为服务器会把 URL 当作静态资源去查找，但实际上这个 URL 应该由前端路由来处理。
- 解决方案: 将所有未匹配到的路由都重定向到 index.html，让前端路由来接管。
- Nginx 配置示例:
```
location / {
  try_files $uri $uri/ /index.html;
}
```
- Apache 配置示例:
```
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
```
兼容性: History API 在较老的浏览器中可能不支持，需要进行兼容性处理。

3.4 History 模式的优缺点

优点:
- URL 美观，符合用户习惯。
- 有利于 SEO。
缺点:
- 需要服务器端配置。
- 兼容性不如 Hash 模式。

四、Abstract 模式

Abstract 模式是一种不依赖浏览器 API 的路由模式，它适用于非浏览器环境，例如服务器端渲染（SSR）、测试环境等。

4.1 Abstract 模式的实现原理

Abstract 模式通过 JavaScript 模拟路由的行为，它维护一个路由历史记录，并提供 API 来进行路由的跳转和状态管理。

4.2 Abstract 模式的代码实现

class AbstractRouter {
  constructor() {
    this.routes = {};
    this.currentRoute = '/';
    this.history = ['/']; // 维护一个路由历史记录
  }

  route(path, callback) {
    this.routes[path] = callback;
  }

  onRouteChange() {
    if (this.routes[this.currentRoute]) {
      this.routes[this.currentRoute]();
    } else {
      // 处理 404 情况
      console.warn(`Route ${this.currentRoute} not found.`);
    }
  }

  push(path) {
    this.history.push(path);
    this.currentRoute = path;
    this.onRouteChange();
  }

  replace(path) {
      this.history.pop();
      this.history.push(path);
      this.currentRoute = path;
      this.onRouteChange();
  }

  go(n) {
    const targetIndex = this.history.length - 1 + n;
    if (targetIndex >= 0 && targetIndex < this.history.length) {
      this.currentRoute = this.history[targetIndex];
      this.onRouteChange();
    } else {
      console.warn('Cannot go beyond history bounds.');
    }
  }

  back() {
    this.go(-1);
  }

  forward() {
    this.go(1);
  }
}

// 使用示例
const router = new AbstractRouter();

router.route('/', () => {
  console.log('Home Page');
});

router.route('/about', () => {
  console.log('About Page');
});

router.route('/users', () => {
  console.log('Users Page');
});

// 模拟路由跳转
router.push('/about'); // 输出: About Page
router.push('/users'); // 输出: Users Page
router.back();       // 输出: About Page

代码解释：

history: 维护一个路由历史记录，用于模拟浏览器的前进和后退功能。
go(n): 前进或后退 n 步。
back(): 后退一步。
forward(): 前进一步。

4.3 Abstract 模式的优缺点

优点:
- 适用于非浏览器环境。
- 兼容性最好。
缺点:
- 只能通过 JavaScript 模拟路由行为，不能直接通过修改 URL 跳转。

五、Vue Router 中的路由模式配置

在 Vue Router 中，可以通过 mode 选项来配置路由模式：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  // ...你的路由配置
];

const router = new VueRouter({
  mode: 'hash', // 可选值：'hash', 'history', 'abstract'
  routes
});

export default router;

六、总结

三种路由模式各有优缺点，选择哪种模式取决于具体的应用场景。

Hash 模式: 适用于对 SEO 要求不高，且希望配置简单的应用。
History 模式: 适用于对 SEO 有要求，且可以进行服务器端配置的应用。
Abstract 模式: 适用于非浏览器环境的应用。

掌握了这三种路由模式的原理，相信你以后在使用 Vue Router 的时候，就能更加得心应手了。

好了，今天的讲座就到这里，希望对大家有所帮助！下次有机会再和大家分享更多前端技术干货。溜了溜了～

发表回复 取消回复

发表回复取消回复