vue3路由跳转后页面显示在上个页面滚动到的位置

问题描述

vue3路由跳转后页面显示在上个页面滚动到的位置

原因

vue中的路由跳转是不同组件的显示，尤其是我们在一个公共框架组件下的子组件，很有可能会存在页面显示位置有记忆的问题，vue-router官方文档给出了解决方案，链接如下：
https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html

解决方案

在创建路由实例的时候添加scrollBehavior（滚动行为）函数，其接受三个参数，to和from路由对象以及savePosition，savePosition通俗来说就是对位置的记忆，且只有为popstate导航（浏览器前进后退按钮触发）才可用。简单使用的代码如下：

const router = createRouter({
	history: createWebHistory(baseUrl),
	routes: [...],
	scrollBehavior(to, from, savedPosition) {
		if (savedPosition) {
			return savedPosition;
		} else {
			return { top: 0 };
		}
	},
})

这样，我们在vue项目中的页面跳转就像普通网页一样每次跳转都会在页面顶部，而通过导航栏 的前进后退按钮导航时会回到页面滚动到的位置。

欢迎小伙伴们留言交流。