前言

在vue的脚手架项目中,想必大家都会用到vue-router,vue-router是vue.js官方推出的一个管理路由的包。它集成了嵌套路由映射、动态路由选择、HTML5 API等等一系列的功能，让我们能够很轻松的管理一个SPA应用的路由。下面让我们一起来看看vue-router中的几种路由模式。

hash模式

当我们使用vue-router的hash模式时,浏览器地址栏上的链接会包含一个#号,这个#号后面的内容被称之为hash值。
这个hash值有几个特点:

  1. https请求不会包含hash值内容
  2. 改变hash值页面不会被刷新
  3. 改变hash值会生成新的浏览器历史记录
    那么我们如何改变hash值呢？我们可以使用浏览器API中的 window.location.hash来获取。

image.png

当然 我们也可以用window.location.hash来修改hash值
image.png
我们发现浏览器地址栏上#后面的hash值改变成了视频

有时候我们可能希望当浏览器地址栏的hash值发生改变的时候进行一些逻辑操作。此时我们可以使用

onhashchange事件进行处理。 onhashchange一共有三种使用方法:

//浏览器对象上的方法
window.onhashchange =  ()=>{   // dosomething }
//在body标签上添加onhashchange方法
<body onhashChange="func();"></body>
// 使用事件监听
window.addEventListener("hashchange", func, false);

下图是用事件监听获取到的结果:

image.png

我们可以从监听获取的回调函数中得到地址栏变更前后的地址。

hash值对于浏览器来说是很重要的,除了上面所说的切换视图,我们还可以使用hash值来进行锚点操作 

<a name='header-2'></a>

当页面中存在name为header-2的标签时，页面或自动滚动到header-2所在的地方 并且浏览器地址栏#后面的内容也会变为header-2

值得注意的是:当项目中使用hash路由时，锚点功能是无法正常使用的。

history模式

vue-router中history模式的部分实现使用了html5新增的pushState()和replaceState(),这两个方法均来自于window.history,它的作用是添加或者替换浏览器历史记录中的条目。

pushState()接受3个参数pushState(stateObj,title,url):

  1. stateObj:状态对象。状态对象简言之就是一个对象。该参数最大能接受一个被序列化之后有640kb的对象，这个序列化的对象最终保存在用户的电脑磁盘中。我们可以使用 window.history.state 获取到这个状态对象
  2. title:标题。作用不大，可以传空字符串。
  3. url:给浏览器历史记录添加一条新的条目。 该路径可以是相对路径也可以是绝对路径
    history.pushState({foo:"bar"}, "page 2", "bar.html");
    当我们打开百度首页并在浏览器console中执行该代码时，浏览器的地址栏发生了改变,
    从baidu.com变成了baidu.com/more,但页面并没有刷新。

我们在浏览器console输入history.state 结果: console打印出了 {foo: "bar"}

replaceState()和pushState()接受的参数一模一样。它们的区别就在于一个新增一条历史记录的条目，一个是替换一条历史记录的条目。

当然 vue-router的history模式中并不是仅仅只用到了这两个api。vue-router继承了history对象的所有api。比如我们经常用到的$router.go(-1), 返回到上一级页面~。这个方法实则是history对象中的go()方法

有关window.history相关的API具体可以参考MDN文档

hash和history方式的优缺点

hash方式

优点:由于发送https请求时不会带上hash值,因此无论是刷新页面或者改变hash值都不会影响到服务器端。

缺点:

  1. 当使用hash值做路由时，锚点功能就失效了
  2. hash方式传递参数的限制是基于浏览器url最大参数限制的。
  3. hash方式导致浏览器地址栏出现#不美观

history方式

优点:

  1. 很方便的获取到传递的参数。并且能传递最大640kb的对象
  2. 后端也能很方便的获取到路由的地址
    缺点:
  3. F5刷新页面可能会导致页面404,前端url必须与发送到服务器请求的url相同
  4. 改变url地址后,会重新请求服务器。

最后

文章若有不足之处，还请大家批评指出。

感谢您观看此篇文章 希望能给个👍评论收藏三连！你的点赞就是我写作的动力。