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