淺談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之類的就很差了，一樣的仍是感謝你們觀賞個人文章，謝謝。