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

1.路由元信息

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

//簡(jiǎn)單的我就不寫了直接上解決方案
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è)不用我說了吧這個(gè)是在組件跳轉(zhuǎn)之后調(diào)用比較適用于返回頁(yè)面之前瀏覽過的區(qū)域或者是讓頁(yè)面返回頂部的操作。

2.滾動(dòng)行為

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

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

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

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

3.路由懶加載

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

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

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

總結(jié)

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

最新評(píng)論