深入理解Vue router的部分高級用法
今天要介紹的是路由元信息，滾動行為以及路由懶加載這幾個的使用方法。
1.路由元信息
什么是路由元信息，看看官網(wǎng)的解釋，定義路由的時候可以配置 meta 字段可以匹配meta字段，那么我們該如何使用它，一個簡單的例子，改變?yōu)g覽器title的值。下面上代碼。
//簡單的我就不寫了直接上解決方案
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../login/Login'
import Home from '../pages/Home'
export default new Router({
mode: 'history',
routes: [
{path: 'home', name: 'Home', component: Home,meta:{title:"主頁"}}
{path: 'login', name: 'Login', component: Login,meta:{title:"登錄"}}
]
})
//可以在跳轉(zhuǎn)之前判斷跳轉(zhuǎn)的組件的名字并用window.document.title賦值
Router.beforeEach((to,from,next) => {
window.document.title=to.meta.title
})
上面的是不是看上去很簡單呢，但是它并不簡單，我只是舉了一個比較小的例子罷了。還要看大家怎么活學(xué)活用這樣才好，但是我強(qiáng)調(diào)幾點(diǎn)需要注意的
第一點(diǎn)就是這個beforeEach頁面跳轉(zhuǎn)之前調(diào)用，好處是比如想要改變title的值不會顯得太突兀，可以直接替換。
第二點(diǎn)afterEach這個不用我說了吧這個是在組件跳轉(zhuǎn)之后調(diào)用比較適用于返回頁面之前瀏覽過的區(qū)域或者是讓頁面返回頂部的操作。
2.滾動行為
想必各位同學(xué)應(yīng)該知道我要講些什么了沒錯就是頁面的前進(jìn)和后退時的滾動事件，怎么實(shí)現(xiàn)呢，有兩種實(shí)現(xiàn)方式，先看代碼。
//剛才我說過的方法直接使用afterEach方法去實(shí)現(xiàn)組件的scrollTo歸零
Router.afterEach((to,from,next) => {
window.scrollTo(0,0)
})
下面是真正的回滾事件可以看看
//簡單的我就不寫了直接上解決方案
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../login/Login'
import Home from '../pages/Home'
export default new Router({
mode: 'history',
routes: [
{path: 'home', name: 'Home', component: Home,meta:{title:"主頁"}}
{path: 'login', name: 'Login', component: Login,meta:{title:"登錄"}}
]，
//有兩種小的方式進(jìn)行回滾
//{ x: number, y: number }
//{ selector: string, offset? : { x: number, y: number }}
//第二種方式僅適用于(offset 只在 2.6.0+ 支持)
scrollBehavior (to, from, savedPosition) {
console.log(savedPosition)
return { x: 0, y: 0 }
}
})
上面我們介紹了scrollBehavior的回滾方法或者說是scrollBehavior的滾動行為，但是想必大家可能對這種方法還有些不太理解，下面我們看看官網(wǎng)是怎么講解的，使用前端路由，當(dāng)切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。沒錯這個方法就是scrollBehavior滾動行為。另外需要注意: 這個功能只在支持 history.pushState 的瀏覽器中可用。更多的使用方法可以去官網(wǎng)去看看。
3.路由懶加載
或許不應(yīng)該叫路由懶加載應(yīng)該叫按需加載我覺著是更合適的。不解釋以后用多了你們就會理解。下面上代碼。
//代碼很簡單看看就知道了，下面只貼部分代碼
{path:'homepages',name:'Homepages',component:homepages,resolve}
沒錯只要使用resolve就能實(shí)現(xiàn)按需加載的要求，是不是很簡單，但是resolve還有很多其他使用方式建議去官網(wǎng)看看。另外諸如go(),history等方法的使用還是去官網(wǎng)上看看自己寫出來理解會更快。
總結(jié)
以上所述是小編給大家介紹的Vue router的部分高級用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例詳解
這篇文章主要介紹了Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例代碼，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
vue webpack多頁面構(gòu)建的實(shí)例代碼
這篇文章主要介紹了vue webpack多頁面構(gòu)建的實(shí)例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
vue中el-table多層級嵌套的具體實(shí)現(xiàn)
本文主要介紹了vue中el-table多層級嵌套的具體實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10
Pinia是Vue的存儲庫,它允許您跨組件/頁面共享狀態(tài),Pinia的成功可以歸功于他管理存儲數(shù)據(jù)的獨(dú)特功,下面這篇文章主要給大家介紹了關(guān)于Vue3中pinia使用方法的相關(guān)資料,需要的朋友可以參考下2023-04-04
本文通過實(shí)例代碼給介紹了vue使用自定義組件實(shí)現(xiàn)通訊錄功能,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue中注冊自定義的全局js方法,文中給大家補(bǔ)充介紹了vue自定義函數(shù)掛到全局的方法，需要的朋友可以參考下2019-11-11
詳解axios 全攻略之基本介紹與使用（GET 與 POST）
本篇文章主要介紹了axios 全攻略之基本介紹與使用（GET 與 POST），詳細(xì)的介紹了axios的安裝和使用，還有 GET 與 POST方法，有興趣的可以了解一下2017-09-09
作為一名剛?cè)腴T計算機(jī)語言的人來說,要想快速完成測試開發(fā)地圖項(xiàng)目,肯定要接用到SuperMap，本文主要介紹了Vue 使用超圖SuperMap的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要為大家詳細(xì)介紹了Vue-cli項(xiàng)目的搭建方法，文中圖片介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue通過krpano.js實(shí)現(xiàn)360全景圖的實(shí)例代碼
這篇文章主要介紹了vue上通過krpano.js實(shí)現(xiàn)360全景圖,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-10-10