vue-router路由的原理是通过改变网址,来实现页面的局部刷新,相比a标签跳转的不同之处在于,路由跳转不需要刷新整个页面。
大概流程可以看成:
  1. 浏览器发出请求
  2.服务器监听到端口有请求过来,并解析url路径
  3.根据服务器的路由配置,返回相应的信息(可以是HTML字符串、也可以是json数据、图片等等)
  4.浏览器根据数据包的 Content-type 来决定如何解析数据
简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能。
前端的路由
hash模式
随着 ajax 的流行,异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不仅仅是在页面交互是无刷新的,连页面跳转都是无刷新的,为了实现单页应用,所以就有了前端路由。
类似于服务端路由,前端路由实现起来其实也很简单,就是匹配不同的 url 路径,进行解析,然后动态的渲染出区域 html 内容。但是这样存在一个问题,就是 url 每次变化的时候,都会造成页面的刷新。那解决问题的思路便是在改变 url 的情况下,保证页面的不刷新。在 2014 年之前,大家是通过 hash 来实现路由,url hash 就是类似于:

这种 #。后面 hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新页面。另外每次 hash 值的变化,还会触发 这个事件,通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听来实现更新页面部分内容的操作:

function matchAndUpdate () {
  // todo 匹配 hash做 dom 更新操作  
}
window.addEventListener('hashchange',matchAndUpdate )
// addEventListener() 方法用于向指定元素添加事件句柄。


Hash 方法是在路由中带有一个 ,主要原理是通过监听 后的 URL 路径标识符的更改而触发的浏览器 事件,然后通过获取 得到当前的路径标识符,再进行一些路由跳转的操作,参见 MDN

  1. :返回完整的 URL
  2. :返回 URL 的锚部分
  3. :返回 URL 路径名
  4. 事件:当 发生改变时,将触发这个事件
比如访问一个路径 ,那么上面几个值分别为:
# 
{
  "href": "",
  "pathname": "/base/",
  "hash": "#/page1"
}

注意: Hash 方法是利用了相当于页面锚点的功能,所以与原来的通过锚点定位来进行页面滚动定位的方式冲突,导致定位到错误的路由路径,因此需要采用别的办法,之前在写 progress-catalog 这个插件碰到了这个情况。