vue路由的实现原理

时间 2019-11-08

标签 vue 路由实现原理栏目系统网络繁體版

原文原文链接

写在前面：一般 SPA 中前端路由有2种实现方式：html

window.history
location.hash

下面就来介绍下这两种方式具体怎么实现的前端

一.historyvue

1.history基本介绍vue-router

window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法，它有几个原始方法：后端

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
history.go(n) - 接受一个整数做为参数，移动到该整数指定的页面，好比go(1)至关于forward()，go(-1)至关于back()，go(0)至关于刷新当前页面
若是移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败

在HTML5，history对象提出了 pushState() 方法和 replaceState() 方法，这两个方法能够用来向历史栈中添加数据，就好像 url 变化了同样（过去只有 url 变化历史栈才会变化），这样就能够很好的模拟浏览历史和前进后退了，如今的前端路由也是基于这个原理实现的。api

2.history.pushState数组

pushState(stateObj, title, url) 方法向历史栈中写入数据，其第一个参数是要写入的数据对象（不大于640kB)，第二个参数是页面的 title, 第三个参数是 url (相对路径)。浏览器

stateObj ：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。若是不须要这个对象，此处能够填null。
title：新页面的标题，可是全部浏览器目前都忽略这个值，所以这里能够填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

关于pushState，有几个值得注意的地方：服务器

pushState方法不会触发页面刷新，只是致使history对象发生变化，地址栏会有反应,只有当触发前进后退等事件（back()和forward()等）时浏览器才会刷新网络

这里的 url 是受到同源策略限制的，防止恶意脚本模仿其余网站 url 用来欺骗用户，因此当违背同源策略时将会报错

3.history.replaceState

replaceState(stateObj, title, url) 和pushState的区别就在于它不是写入而是替换修改浏览历史中当前纪录，其他和 pushState如出一辙

4.popstate事件

定义：每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。

注意：仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用JavaScript调用back、forward、go方法时才会触发。另外，该事件只针对同一个文档，若是浏览历史的切换，致使加载不一样的文档，该事件也不会触发。

用法：使用的时候，能够为popstate事件指定回调函数。这个回调函数的参数是一个event事件对象，它的state属性指向pushState和replaceState方法为当前URL所提供的状态对象（即这两个方法的第一个参数）。

5.history实现spa前端路由代码

 
         <a class= 
         "api a" 
         >a.html</a> 
        
         <a class= 
         "api b" 
         >b.html</a> 
        
         // 注册路由 
        
         document.querySelectorAll( 
         '.api' 
         ).forEach(item => { 
        
         item.addEventListener( 
         'click' 
         , e => { 
        
         e.preventDefault(); 
        
         let link = item.textContent; 
        
         if 
         (!!(window.history && history.pushState)) { 
        
         // 支持History API 
        
         window.history.pushState({name:  
         'api' 
         }, link, link); 
        
         }  
         else 
         { 
        
         // 不支持,可以使用一些Polyfill库来实现 
        
         } 
        
         },  
         false 
         ) 
        
         }); 
        
         // 监听路由 
        
         window.addEventListener( 
         'popstate' 
         , e => { 
        
         console.log({ 
        
         location: location.href, 
        
         state: e.state 
        
         }) 
        
         },  
         false 
         )

popstate监听函数里打印的e.state即是history.pushState()里传入的第一个参数，在这里即为{name: 'api'}

二.Hash

1.Hash基本介绍

url 中能够带有一个 hash http://localhost:9000/#/a.html

window 对象中有一个事件是 onhashchange，如下几种状况都会触发这个事件：

直接更改浏览器地址，在最后面增长或改变#hash；
经过改变location.href或location.hash的值；
经过触发点击带锚点的连接；
浏览器前进后退可能致使hash的变化，前提是两个网页地址中的hash值不一样。

2.Hash实现spa前端路由代码

 
         // 注册路由 
        
         document.querySelectorAll( 
         '.api' 
         ).forEach(item => { 
        
         item.addEventListener( 
         'click' 
         , e => { 
        
         e.preventDefault(); 
        
         let link = item.textContent; 
        
         location.hash = link; 
        
         },  
         false 
         ) 
        
         }); 
        
         // 监听路由 
        
         window.addEventListener( 
         'hashchange' 
         , e => { 
        
         console.log({ 
        
         location: location.href, 
        
         hash: location.hash 
        
         }) 
        
         },  
         false 
         )

hash模式与history模式，这两种模式都是经过浏览器接口实现的，除此以外vue-router还为非浏览器环境准备了一个abstract模式，其原理为用一个数组stack模拟出浏览器历史记录栈的功能。固然，以上只是一些核心逻辑，为保证系统的鲁棒性源码中还有大量的辅助逻辑，也很值得学习。

3、两种模式比较

pushState设置的新URL能够是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL
pushState设置的新URL能够与当前URL如出一辙，这样也会把记录添加到栈中；而hash设置的新值必须与原来不同才会触发记录添加到栈中
pushState经过stateObject能够添加任意类型的数据到记录中；而hash只可添加短字符串
pushState可额外设置title属性供后续使用

4、history模式的一个问题

咱们知道对于单页应用来说，理想的使用场景是仅在进入应用时加载index.html，后续在的网络操做经过Ajax完成，不会根据URL从新请求页面，可是不免遇到特殊状况，好比用户直接在地址栏中输入并回车，浏览器重启从新加载应用等。
hash模式仅改变hash部分的内容，而hash部分是不会包含在HTTP请求中的：

http://oursite.com/#/user/id // 如从新请求只会发送http://oursite.com/

故在hash模式下遇到根据URL请求页面的状况不会有问题。

而history模式则会将URL修改得就和正常请求后端的URL同样

http://oursite.com/user/id

在此状况下从新向后端发送请求，如后端没有配置对应/user/id的路由处理，则会返回404错误。

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

参考资料：

一、浏览器History API ：https://developer.mozilla.org/zh-CN/docs/Web/API/History_API

二、解决History模式访问404的方案：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90