最近做的项目中，涉及vue router 路由操作，其操作方法不同，产生的行为亦不同。本文通过对比实验，对其行为进行实验对比及总结，避免混淆。
vue router的单页跳转的history模式，类似HTML5 history方式，两者使用的API类似。
1、测试介绍
1.1、测试分两种跳转方式
a、单页 <-> 单页：单页内的跳转（通过vue router的方式跳转）；
b、单页 <-> 普通页：单页到普通页面的跳转（或者通过href、window.location的方式跳单页）。
1.2、测试点
a、 router对应组件是否重新执行；
b、页面是否刷新。
1.3、用户操作
a、点击页内路由；
b、操作浏览器回退按钮。
2、测试
2.1、测试点用例设置
a、测试点a：组件是否重新执行
created() { console.log('reload error ', testObj.pageName) testObj.pageName = 'error' }
在对应组件的created生命周期中输出信息，如果有信息输出，路由对应组件得到执行。
b、测试点b：是否刷新
在入口文件.html 中，设置变量var testObj = { pageName: 'init’}，在跳转过程中，如果pageName的值非’init’，那么testObj变量在内存中得以保存，页面未刷新。
2.2、跳转方式用例设置
a、单页 <-> 单页
创建两个单页路由test1、test2，用于测试单页<—>单页的情况
如下：
<router-link :to="{ name: 'test2'}">跳转</router-link>
<router-link :to="{ name: 'test1'}">跳转</router-link>
{
path: '/test',
component: App,
children: [{
path: 'my1',
component: test1,
name: 'test1',
meta: {
title: 'myTest1'
}
},
{
path: 'my2',
component: test2,
name: 'test2',
meta: {
title: 'myTest2'
}
}]
}
预期：
a、router对应组件重新执行；
b、页面不刷新。
测试console结果：
reload 404 init
reload error 404
reload 404 error
reload error 404
…
结论：每次跳转，created生命周期中的代码都执行，说明组件重新执行，a点符合预期；created除第一刷新页面进来为’init’外，其他都为非’init’，说明跳转过程中变量存在内存中，页面未刷新，b点符合预期。
b、单页 <-> 普通页
<a href="http://10.10.11.182:8085/test/my2">外跳转</a>
window.location = 'http://10.10.11.182:8085/test/my2'
预期：页面直接刷新。
测试console结果：
reload 404 init
// 外页
reload 404 init
结论：页面刷新，符合预期。
以上为操作页内路由跳转的测试结论，操作回退按钮［本实验使用chrome浏览器］的结论如下：
使用单页路由跳转形成的history（单页<->单页），操作浏览器回退按钮的行为与页内跳转的行为一致，未刷新页面，而是对应组件重新执行。
而通过href、window.location跳转的页面（单页<->普通页），操作浏览器回退按钮的行为与形成history行为一致，始终刷新页面。
总结：单页内跳转，产生的history变化，使得对应组件重新执行，但不刷新页面；但，使用href、window.location进行跳转，产生的history变化，将使得页面重新刷新。
以上为浏览器在vue router 和 window.location、href 下产生的跳转行为表现，那么这些跳转背后的实质是什么呢？
了解其实质，就需要了解浏览器对window.location、href、history API 的设定，它们产生的原因和原理，下一篇将说明其背后的原理：window.history的跳转实质－HTML5 history API 解析