vue-router实现原理

最新推荐文章于 2024-03-20 14:45:00 发布

duansamve

最新推荐文章于 2024-03-20 14:45:00 发布

阅读量2k

点赞数

分类专栏： vue 文章标签： vue vue-router

本文链接：https://blog.youkuaiyun.com/duansamve/article/details/101423552

版权

vue 专栏收录该内容

114 篇文章

订阅专栏

近期被问到一个问题，在你们项目中使用的是Vue的SPA（单页面）还是Vue的多页面设计？

这篇文章主要围绕Vue的SPA单页面设计展开。

随着前端应用的业务功能起来越复杂，用户对于使用体验的要求越来越高，单面（SPA）成为前端应用的主流形式。大型单页应用最显著特点之一就是采用的前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。

更新视图但不重新请求页面，是前端路由原理的核心之一。

单页面

单页面应用即SPA(single page application)：单一页面应用程序，有且只有一个完整的页面；当它在加载页面的时候，不会加载整个页面的内容，而只更新某个指定的容器中内容。

单页的核心之一是：更新视图而不重新请求页面。

多页面

即每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。

原理是：传统的页面应用，是用一些超链接来实现页面切换和跳转的。

vue-router实现原理

原理核心就是更新视图但不重新请求页面。

vue-router实现单页面路由跳转，提供了三种方式：hash模式、history模式、abstract模式，根据mode参数来决定采用哪一种方式。

路由模式

vue-router 提供了三种运行模式：

hash: 使用 URL hash 值来作路由。默认模式。
history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。

Hash模式

hash即浏览器url中#后面的内容，包含#。hash是URL中的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会加载相应位置的内容，不会重新加载页面。也就是说

即#是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中，不包含#。
每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置。

所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。

缺点：

搜索引擎不友好
难以追踪用户行为

思路

当URL的片段标识符更改时，将触发hashchange事件 (跟在＃符号后面的URL部分，包括＃符号),然后根据hash值做些路由跳转处理的操作，具体参数可以访问location查看。

最基本的路由实现方法监听事件根据location.hash判断界面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>
        <a href="#/a">a</a>
      </li>
      <li>
        <a href="#/b">b</a>
      </li>
      <li>
        <a href="#/c">c</a>
      </li>
    </ul>
    <div id="view"></div>

    <script>
      var view = null;
      // 页面加载完不会触发 hashchange，这里主动触发一次 hashchange 事件,该事件快于onLoad,所以需要在这里操作
      window.addEventListener('DOMContentLoaded', function () {
        view = document.querySelector('#view');
        viewChange();
      });
      // 监听路由变化
      window.addEventListener('hashchange', viewChange);

      // 渲染视图
      function viewChange() {
        switch (location.hash) {
          case '#/b':
            view.innerHTML = 'b';
            break;
          case '#/c':
            view.innerHTML = 'c';
            break;
          default:
            view.innerHTML = 'a';
            break;
        }
      }
    </script>
  </body>
</html>

History模式

HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL，就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

1、History简介

window.history是用来保存用户在一个会话期间的网站访问记录，并提供相应的方法进行追溯。其对应的成员如下：

方法：back()、forward()、go(num)、pushState(stateData, title, url)、replaceState(stateData, title, url)

属性：length、state

事件：window.onpopstate

方法说明：

back()：回退到上一个访问记录; 在历史记录中后退：window.history.back();
forward()：前进到下一个访问记录; 在历史记录中前进：window.history.forward();
go(num)：跳转到相应的访问记录;其中num大于0，则前进;小于0，则后退; 例如：后退一页window.history.go(-1); 向前移动一页window.history.go(1);
window.history.length：查看历史记录栈中一共有多少个记录点;
pushState(stateData, title, url)：在history中创建一个新的访问记录，不能跨域，且不造成页面刷新;
replaceState(stateData, title, url)：修改当前的访问记录，不能跨域，且不造成页面刷新;

另，HTML5新增了可以监听history和hash访问变化的全局方法：

onpopstate的使用姿势

在onpopstate里面：

可以获得event.state数据，这个数据是pushState()或者replaceState()的第一个参数存进去的。
而关于第二个参数title，请注意：对于onpopstate来说，不存在的数据。
第三个参数url，可以通过document.location直接读取。

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

window.onpopstate：调用history.pushState()或者history.replaceState()不会触发popstate事件，popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮，或者在JavaScript中调用history.back()、history.forward()、history.go()方法。此外，a 标签的锚点也会触发该事件。window.onpopstate - Web API 接口参考 | MDN
window.onhashchange：当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发。触发的情况如下：

通过设置Location 对象的 location.hash 或 location.href 属性修改锚部分;
使用不同history操作方法到带hash的页面;
点击链接跳转到锚点。

2、浏览器history的发展

我们知道在使用location.href、a标签的href[非锚点的方式]等，进行页面访问时，页面会刷新。但随着大前端时代的到来，产生了异步单页来提升性能。我们不再希望每次的跳转都带来页面的刷新，而是希望这种跳转仅仅引发数据变化，从而改变视图。

此时，产生了HTML5 history API。这些API，是为了解决异步单页的路由问题，使得页面在不刷新的情况下，带来视图的变化，同时变化后的信息能得到准确的传播。

下面来看看一个应用场景的实例：我们在访问一个新闻列表页，找到一篇感兴趣的新闻，文章的内容通过ajax的方式获取到。我们觉得这篇文章很有趣，并将其分享给了朋友们。如果url地址没有变化，朋友们访问的将是列表页，而非有趣的文章。而通过HTML5的API，在异步请求ajax的同时，我们可以改变url地址，朋友们访问的也正是这篇文章。

那么，

让我们来看看window.history是如何工作的吧～～～

3、浏览器history变化与浏览器的行为

history栈变更图

如图，展示了初始长度为4的history栈，在不同操作方法下的变化情况，下面对每步进行分析：

step1～step4：均为history的访问方法，获取相应的历史记录中的url;

step5：通过location.href创建一个新的url记录，其将当前url2之后的记录清空，并在其后新增url5;history长度由4变成3;history的每次新增操作，都会将其后记录清空，在其后新增记录。

step6：通过pushState方法创建一个新的url记录，其也是清空、再新增记录;

step8：通过replaceState方法修改一个url记录，其不会产生新记录，而是将当前记录进行修改。

值得注意的是，通过pushState新增或者修改的history记录，被访问时，当前页面不刷新。而locaiton.href生成的记录被访问时，页面将进行刷新。

4、Vue router的本质

vue router其实质是在HTML5 historyAPI、window.onpopstate、window.onhashchange上做的封装，通过一定的规则映射到对应的方法上，同时通过监听变化，从而实现单页路由。

5、思路

监听点击事件禁止默认跳转操作，手动利用history实现一套跳转逻辑，根据location.pathname渲染界面。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>

<body>
    <ul>
        <li>
            <a href="/a">a</a>
        </li>
        <li>
            <a href="/b">b</a>
        </li>
        <li>
            <a href="/c">c</a>
        </li>
    </ul>
    <div id="view"></div>

    <script>
        var view = null;
        // 页面加载完不会触发 hashchange，这里主动触发一次 hashchange 事件,该事件快于onLoad,所以需要在这里操作
        window.addEventListener('DOMContentLoaded', function () {
            view = document.querySelector('#view');
            document
                .querySelectorAll('a[href]')
                .forEach(e => e.addEventListener('click', function (_e) {
                    _e.preventDefault();
                    history.pushState(null, '', e.getAttribute('href'));
                    viewChange();
                }));

            viewChange();
        });
        // 监听路由变化
        window.addEventListener('popstate', viewChange);

        // 渲染视图
        function viewChange() {
            switch (location.pathname) {
                case '/b':
                    view.innerHTML = 'b';
                    break;
                case '/c':
                    view.innerHTML = 'c';
                    break;
                default:
                    view.innerHTML = 'a';
                    break;
            }
        }
    </script>
</body>

</html>

注意，该方法不支持本地运行,只能线上运作或者启动服务器查看效果。

再回到上一个浏览器刷新行为的测试小实验中，了解了history栈的变化情况，及其中的两种url创建方式，便能很好的理解浏览器在不同情况下的不同行为了。

由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

有时，history模式下也会出问题：

hash模式下：xxx.com/#/id=5 请求地址为 xxx.com,没有问题。
history模式下：xxx.com/id=5 请求地址为 xxx.com/id=5，如果后端没有对应的路由处理，就会返回404错误；

为了应对这种情况，需要后台配置支持：

官方推荐的解决办法是在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。同时这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。或者，如果是用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现 fallback。

export const routes = [ 
  {path: "/", name: "homeLink", component:Home}
  {path: "/register", name: "registerLink", component: Register},
  {path: "/login", name: "loginLink", component: Login},
  {path: "*", redirect: "/"}]

此处就设置如果URL输入错误或者是URL 匹配不到任何静态资源，就自动跳到到Home页面。

abstract模式

abstract模式是使用一个不依赖于浏览器的浏览历史虚拟管理后端。

根据平台差异可以看出，在 Weex 环境中只支持使用 abstract 模式。不过，vue-router 自身会对环境做校验，如果发现没有浏览器的 API，vue-router 会自动强制进入 abstract 模式，所以在使用 vue-router 时只要不写 mode 配置即可，默认会在浏览器环境中使用 hash 模式，在移动端原生环境中使用 abstract 模式。（当然，你也可以明确指定在所有情况下都使用 abstract 模式）。