当我们在写Vue项目时经常会遇到这样一个问题:比如当我们点击进入详情页面时,然后退出之后再进入到其他的详情页面的时候会停留在上一个详情页面所在的位置。
解决方法:
只需要在配置路由的文件中加入下的的代码即可,每次做路由切换的时候让x和y轴的值都为0,即最顶部。
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
例如:
export default new Router({
routes: [{
path: '/',
name: 'Home',
component: Home
},
{
path: '/city',
name: 'City',
component: City
},
{
path: '/detail/:id', // 动态路由
name: 'Deteil',
component: Detail
}
],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
})
参考网址:https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8