資訊專欄INFORMATION COLUMN
摘要：滾動(dòng)行為使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。注意，這個(gè)功能只能在模式下啟用滾動(dòng)的位置方法接收和路由對(duì)象。
滾動(dòng)行為
使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時(shí)頁(yè)面如何滾動(dòng)。
注意，這個(gè)功能只能在history模式下啟用
var router=new VueRouter({
routes:[],
scrollBehavior(to,from,savedPosition){
//return 滾動(dòng)的位置
}
})
scrollBehavior 方法接收 to 和 from 路由對(duì)象。第三個(gè)參數(shù) savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時(shí)才可用。
滾動(dòng)位置的對(duì)象：
{x:number,y:number}
{selector:string}
例如：
scrollBehavior(to,from,savedPosition){
return{x:number,y:number}
}
意思就是所有的路由導(dǎo)航，都會(huì)返回到頁(yè)面的頂部.
滾動(dòng)到錨點(diǎn)：
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
利用錨點(diǎn)行為做一個(gè)小例子，一個(gè)藍(lán)色和紅色的P標(biāo)簽作為錨點(diǎn)，當(dāng)點(diǎn)擊相應(yīng)的鏈接時(shí)，頁(yè)面滾動(dòng)到相應(yīng)的錨點(diǎn)上：
HTML
滾動(dòng)效果
首頁(yè) 導(dǎo)航 關(guān)于 紅 藍(lán)
javascript
var Home = {
template:"home"
}
var Foo = {
template:"nav"
}
var Bar = {
template:
`
about
紅色頁(yè)面
藍(lán)色頁(yè)面
`
}
var router = new VueRouter({
mode:"history",
//控制滾動(dòng)位置
scrollBehavior (to, from, savedPosition) {
//判斷如果滾動(dòng)條的位置存在直接返回到當(dāng)前位置，否者返回到起點(diǎn)
if (savedPosition) {
return savedPosition
} else {
if (to.hash) {
return {selector: to.hash}
}
}
},
routes:[
{
path:"/",component:Home
},
{
path:"/foo",component:Foo
},
{
path:"/about",component:Bar
}
]
});
var vm = new Vue({
el:"#app",
router
});
大家可以把html部分和js部分復(fù)制到自己的編輯器中試一試
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91734.html
摘要：調(diào)用全局的守衛(wèi)。在被激活的組件里調(diào)用。用創(chuàng)建好的實(shí)例調(diào)用守衛(wèi)中傳給的回調(diào)函數(shù)。 本文適用于對(duì) Vue.js 和 vue-router 有一定程度了解的開發(fā)者除特殊說明，vue-router 版本為 3.0.2 正文 路由 class 匹配 路由匹配后會(huì)給該標(biāo)簽添加 class 屬性值 .router-link-active，該功能在嵌套路由中十分方便 class 的實(shí)際屬性值可以通...
摘要：注意這個(gè)功能只在支持的瀏覽器中可用。官方文檔簡(jiǎn)介滾動(dòng)行為使用方法期望滾動(dòng)到哪個(gè)的位置或者集成模式寫法期望滾動(dòng)到哪個(gè)的位置方法接收和路由對(duì)象。 前提：之前寫過關(guān)于keep-Alive組件，來實(shí)現(xiàn)在列表頁(yè)進(jìn)入詳情頁(yè)后，后退，返回列表，顯示上次訪問的位置（原理就是緩存列表頁(yè)數(shù)據(jù)來實(shí)現(xiàn)），目前發(fā)現(xiàn)另外一個(gè)問題，就是如果后臺(tái)操作改變數(shù)據(jù)的狀態(tài)，緩存的辦法就會(huì)導(dǎo)致數(shù)據(jù)更新不及時(shí)導(dǎo)致一些頁(yè)面錯(cuò)誤（例...
摘要：滾動(dòng)行為使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。這個(gè)方法返回滾動(dòng)位置的對(duì)象信息，長(zhǎng)這樣如果返回一個(gè)布爾假的值，或者是一個(gè)空對(duì)象，那么不會(huì)發(fā)生滾動(dòng)。 滾動(dòng)行為 使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時(shí)頁(yè)面...
摘要：滾動(dòng)行為使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。期望滾動(dòng)到哪個(gè)的位置返回滾動(dòng)位置的對(duì)象信息如果返回一個(gè)布爾假的值，或者是一個(gè)空對(duì)象，那么不會(huì)發(fā)生滾動(dòng)。 滾動(dòng)行為 使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時(shí)頁(yè)...
閱讀 3494·2021-11-18 10:02
閱讀 1623·2021-10-12 10:12
閱讀 3007·2021-10-09 09:53
閱讀 4902·2021-09-09 09:34
閱讀 883·2021-09-06 15:02
閱讀 2787·2021-08-05 10:02
閱讀 3149·2019-08-30 15:44
閱讀 3133·2019-08-28 18:04
