vue路由跳轉(zhuǎn)頁面滾動到頂部

如果想在vue路由跳轉(zhuǎn)后滾動到指定的位置,只需要調(diào)用內(nèi)置方法(scrollBehavior)既可。
具體參考官網(wǎng):(https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html)

vue2.x:

import VueRouter from 'vue-router'
Vue.use(VueRouter)
 
//vue2.0 new VueRouter({}) 創(chuàng)建路由實(shí)例
const router= new VueRouter({
  routes,
  //配置滾動行為,跳轉(zhuǎn)到新的路由界面滾動條的位置
  scrollBehavior () {
    return { x: 0, y: 0 }
  }
})
vue3.0:
import { createRouter, createWebHashHistory } from 'vue-router'

// vue3.0 creatRouter({}) 創(chuàng)建路由實(shí)例
const router = createRouter({
  // 使用hash的路由模式
  history: createWebHashHistory(),
  routes,
  // 每次切換路由的時候滾動到頁面頂部
  scrollBehavior () {
    return { left: 0, top: 0 }
  }
})
這里要特別注意里面的參數(shù)不一樣:

vue2.0 x y 控制
vue3.0 left top 控制

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容