在vue實(shí)際開(kāi)發(fā)過(guò)程中，很多項(xiàng)目同時(shí)具備移動(dòng)端和pc端，需要做到不同的設(shè)備訪(fǎng)問(wèn)不同的網(wǎng)頁(yè)。這時(shí)就需要用到路由守衛(wèi)，通過(guò)路由攔截來(lái)判斷是否為移動(dòng)端，再跳轉(zhuǎn)不同頁(yè)面。有關(guān)路由守衛(wèi)的內(nèi)容可以點(diǎn)擊此鏈接>>查看。
首先在index.js中定義一個(gè)變量來(lái)判斷是不是移動(dòng)設(shè)備。
接著通過(guò)路由攔截來(lái)修改跳轉(zhuǎn)路徑。如果是移動(dòng)設(shè)備，且能夠成功引入mobile+path這個(gè)路徑的話(huà)，就在路徑前增加’/mobile’；pc端則相反，跳過(guò)’/mobile’再訪(fǎng)問(wèn)。如圖所示：
這樣便能夠?qū)崿F(xiàn)pc端和移動(dòng)端頁(yè)面之間的自動(dòng)跳轉(zhuǎn)。
需要注意，移動(dòng)端和pc端的路由應(yīng)保持一致，如pc端路由為：’/center/index’，則移動(dòng)端應(yīng)為’/mobile/center/index’。
