vue切换页面/路由跳转后,页面不会置顶的解决方案
场景:使用vue-router组件,进行页面切换,切换后的页面滚动条还停留在上一级页面的位置,没有置顶。需求:每次跳转新页面时,都置顶显示。解决方案:在vue的router目录下的index.js文件中进行配置://修改前const routes = []...const router = new VueRouter({routes,})//修改后const routes = []...const
·
场景:使用vue-router组件,进行页面切换,切换后的页面滚动条还停留在上一级页面的位置,没有置顶。
需求:每次跳转新页面时,都置顶显示。
解决方案:
在vue的router目录下的index.js文件中进行配置:
//修改前
const routes = []
...
const router = new VueRouter({
routes,
})
//修改后
const routes = []
...
const scrollBehavior = (to, from, savedPosition) => {
if (savedPosition && to.meta.keepAlive) {
return savedPosition;
}
return { left: 0, top:0 };
}
const router = new VueRouter({
routes,
scrollBehavior,
})
上图红框的部分,为新增内容配置以后,每次页面切换都会保持置顶。
ps:以上设置在vue-router模式是history下没什么问题。如果在hash模式下,且vue-router的版本为4+,那么返回对象的x,y就要分别修改为left,top。
更多推荐
已为社区贡献4条内容
所有评论(0)