VUE3.0 路由跳转之后页面停留在上一个浏览页面位置不会回到顶部问题

方式一:普通用法,vue2.0也可用

// 一般方式路由拦截
export default {
	// 组件守护器
	beforeRouteEnter(to, from, next) {
	  // A跳转到B,B页面停留在A页面的滚动位置;解决方法:将scrollTop设置为0
	  window.scroll(0, 0);
	  next();
	},
	
	setup(){
	}

}

用法如图:
VUE3.0 路由跳转之后页面停留在上一个浏览页面位置不会回到顶部问题_第1张图片

方式二: setup 语法糖时

    // setup语法糖里的路由拦截  
    defineOptions({
      // name: '***',
      beforeRouteEnter(_to, _from, next) {
        window.scroll(0, 0);
        next();
      }
    })

用法如图:
VUE3.0 路由跳转之后页面停留在上一个浏览页面位置不会回到顶部问题_第2张图片

你可能感兴趣的:(vue,前端)