vue router的浏览器跳转行为

时间：2022-11-09 17:49:03

最近做的项目中，涉及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 解析
标签：

相关文章