如果想在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)建路由實例
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)建路由實例
const router = createRouter({
// 使用hash的路由模式
history: createWebHashHistory(),
routes,
// 每次切換路由的時候滾動到頁面頂部
scrollBehavior () {
return { left: 0, top: 0 }
}
})
這里要特別注意里面的參數(shù)不一樣:
vue2.0 x y 控制
vue3.0 left top 控制