今天要介紹的是路由元信息，滾動(dòng)行為以及路由懶加載這幾個(gè)的使用方法。

1.路由元信息

什么是路由元信息，看看官網(wǎng)的解釋，定義路由的時(shí)候可以配置 meta 字段可以匹配meta字段，那么我們?cè)撊绾问褂盟?#xff0c;一個(gè)簡(jiǎn)單的例子，改變?yōu)g覽器title的值。下面上代碼。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//簡(jiǎn)單的我就不寫(xiě)了直接上解決方案 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:"主頁(yè)"}} ????{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 })

上面的是不是看上去很簡(jiǎn)單呢，但是它并不簡(jiǎn)單，我只是舉了一個(gè)比較小的例子罷了。還要看大家怎么活學(xué)活用這樣才好，但是我強(qiáng)調(diào)幾點(diǎn)需要注意的

第一點(diǎn)就是這個(gè)beforeEach頁(yè)面跳轉(zhuǎn)之前調(diào)用，好處是比如想要改變title的值不會(huì)顯得太突兀，可以直接替換。

第二點(diǎn)afterEach這個(gè)不用我說(shuō)了吧這個(gè)是在組件跳轉(zhuǎn)之后調(diào)用比較適用于返回頁(yè)面之前瀏覽過(guò)的區(qū)域或者是讓頁(yè)面返回頂部的操作。

2.滾動(dòng)行為

想必各位同學(xué)應(yīng)該知道我要講些什么了沒(méi)錯(cuò)就是頁(yè)面的前進(jìn)和后退時(shí)的滾動(dòng)事件，怎么實(shí)現(xiàn)呢，有兩種實(shí)現(xiàn)方式，先看代碼。

?

1 2 3 4

//剛才我說(shuō)過(guò)的方法直接使用afterEach方法去實(shí)現(xiàn)組件的scrollTo歸零 Router.afterEach((to,from,next) => { ??window.scrollTo(0,0) })

下面是真正的回滾事件可以看看

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

//簡(jiǎn)單的我就不寫(xiě)了直接上解決方案 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:"主頁(yè)"}} ????{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的回滾方法或者說(shuō)是scrollBehavior的滾動(dòng)行為，但是想必大家可能對(duì)這種方法還有些不太理解，下面我們看看官網(wǎng)是怎么講解的，使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時(shí)頁(yè)面如何滾動(dòng)。沒(méi)錯(cuò)這個(gè)方法就是scrollBehavior滾動(dòng)行為。另外需要注意: 這個(gè)功能只在支持 history.pushState 的瀏覽器中可用。更多的使用方法可以去官網(wǎng)去看看。

3.路由懶加載

或許不應(yīng)該叫路由懶加載應(yīng)該叫按需加載我覺(jué)著是更合適的。不解釋以后用多了你們就會(huì)理解。下面上代碼。

?

1 2	//代碼很簡(jiǎn)單看看就知道了，下面只貼部分代碼 {path:'homepages',name:'Homepages',component:homepages,resolve}

沒(méi)錯(cuò)只要使用resolve就能實(shí)現(xiàn)按需加載的要求，是不是很簡(jiǎn)單，但是resolve還有很多其他使用方式建議去官網(wǎng)看看。另外諸如go(),history等方法的使用還是去官網(wǎng)上看看自己寫(xiě)出來(lái)理解會(huì)更快。

總結(jié)

以上所述是小編給大家介紹的Vue router的部分高級(jí)用法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

總結(jié)

以上是生活随笔為你收集整理的vue从入门到精通之高级篇（一）vue-router的高级用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。