vue从入门到精通之高级篇（一）vue-router的高级用法
今天要介紹的是路由元信息，滾動行為以及路由懶加載這幾個的使用方法。
1.路由元信息
什么是路由元信息，看看官網的解釋，定義路由的時候可以配置 meta 字段可以匹配meta字段，那么我們該如何使用它，一個簡單的例子，改變瀏覽器title的值。下面上代碼。
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | //簡單的我就不寫了直接上解決方案 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.滾動行為
想必各位同學應該知道我要講些什么了沒錯就是頁面的前進和后退時的滾動事件，怎么實現呢，有兩種實現方式，先看代碼。
?
| 1 2 3 4 | //剛才我說過的方法直接使用afterEach方法去實現組件的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 | //簡單的我就不寫了直接上解決方案 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.路由懶加載
或許不應該叫路由懶加載應該叫按需加載我覺著是更合適的。不解釋以后用多了你們就會理解。下面上代碼。
?
| 1 2 | //代碼很簡單看看就知道了，下面只貼部分代碼 {path:'homepages',name:'Homepages',component:homepages,resolve} |
沒錯只要使用resolve就能實現按需加載的要求，是不是很簡單，但是resolve還有很多其他使用方式建議去官網看看。另外諸如go(),history等方法的使用還是去官網上看看自己寫出來理解會更快。
總結
以上所述是小編給大家介紹的Vue router的部分高級用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
總結
以上是生活随笔為你收集整理的vue从入门到精通之高级篇（一）vue-router的高级用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： a标签点击事件_html常用标签
- 下一篇： 记一次vue项目yarn打包环境配置失效