淺談Vue-router的部分高階用法

前言

大家好久不見，上週沒來得及寫文章，這周終於有時間釋出文章了，還是很開心的，至於這篇文章的內容大家就可以看出來不會有很多，並且針對的是已經有初步瞭解Vue-router的人，好了進入正題。

正題

今天要介紹的是路由元資訊，滾動行為以及路由懶載入這幾個的使用方法

1.路由元資訊

什麼是路由元資訊，看看官網的解釋，定義路由的時候可以配置 meta 欄位可以匹配meta欄位，那麼我們該如何使用它，一個簡單的例子，改變瀏覽器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這個不用我說了吧這個是在元件跳轉之後呼叫比較適用於返回頁面之前瀏覽過的區域或者是讓頁面返回頂部的操作。

2.滾動行為

想必各位同學應該知道我要講些什麼了沒錯就是頁面的前進和後退時的滾動事件，怎麼實現呢，有兩種實現方式，先看程式碼。

//剛才我說過的方法直接使用afterEach方法去實現元件的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的滾動行為，但是想必大家可能對這種方法還有些不太理解，下面我們看看官網是怎麼講解的，使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新載入頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。沒錯這個方法就是scrollBehavior滾動行為。另外需要注意: 這個功能只在支援 history.pushState 的瀏覽器中可用。更多的使用方法可以去官網去看看。

3.路由懶載入

或許不應該叫路由懶載入應該叫按需載入我覺著是更合適的。不解釋以後用多了你們就會理解。下面上程式碼。

//程式碼很簡單看看就知道了，下面只貼部分程式碼
{path:'homepages',name:'Homepages',component:homepages,resolve}
複製程式碼

沒錯只要使用resolve就能實現按需載入的要求，是不是很簡單，但是resolve還有很多其他使用方式建議去官網看看。另外諸如go(),history等方法的使用還是去官網上看看自己寫出來理解會更快。

後記

最終的最終還是希望大家多看看理解了再去使用到專案中，不至於使用之後出現細小的bug之類的就不好了，同樣的還是感謝大家觀賞我的文章，謝謝。

淺談Vue-router的部分高階用法

相關文章