vue router的瀏覽器跳轉行為

最近做的項目中，涉及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 解析