Vue切换路由，页面回到上一次缓存的滚动位置（代码量少，通用有效）

需求：

当切换不同路由时，期望切换后的路由页面保留上次滚动的位置。

解决思路：

利用路由中的meta属性，对不同路由页面滚动的位置做缓存，切换路由时，获取当前路由meta属性中缓存的滚动位置，再自动滚动到此位置即可。

具体代码：

router.js文件

		<!-- 操作一 -->
		// 在meta属性中增加scrollTop属性
		{
        path: 'goodList',
        name: 'goodList',
        meta: {
          title: '商品列表',
          scrollTop: 0
        },
        component: resolve => require(['@/pages/goodList/index.vue'], resolve)
      },

layout.vue文件

		<!-- 操作二 -->
		// 在指定内容页视图元素中，添加ref属性及mousewheel事件
        <div ref="scrollView" @mousewheel="scrollChange">
          <keep-alive>
            <router-view v-if="!needRelogin" :key="$route.fullPath" ref="pageView"></router-view>
          </keep-alive>
        </div>
        
		<!-- 操作三 -->
        // methods中定义滚动监听事件，设置路由meta属性里面的指定参数
	    scrollChange(e) {
	      console.log('父滚动条到页面顶部距离', e.target.offsetTop)
	      console.log('相对距离', this.$refs.scrollView.scrollTop)
	      console.log('绝对距离', e.target.offsetTop + this.$refs.scrollView.scrollTop)
	      // 设置路由参数scrollTop等于当前元素的相对距离
	      this.$route.meta.scrollTop = this.$refs.scrollView.scrollTop
	    }
	
		<!-- 操作四 -->
	    // monted中给元素添加滚动监听
		mounted() {
		    // 获取指定元素
		    const scrollView = this.$refs['scrollView']
		    // 添加滚动监听
		    scrollView.addEventListener('scroll', this.scrollChange, true)
		},

		<!-- 操作五 -->
		// 销毁监听
		 beforeDestroy() {
		    // 获取指定元素
		    const scrollView = this.$refs['scrollView']
		    // 移除监听
		    scrollView.removeEventListener('scroll', this.scrollChange, true)
		 },

		<!-- 操作六 -->
		// 监听路由变化时，自动滚动到上次缓存的位置
		 watch: {
		    '$route.path': {
		      handler: () => {
		        // 自动滚动到上一次缓存位置
		        this.$nextTick(() => {
		          this.$refs.scrollView.scrollTo(0, this.$route.meta?.scrollTop || 0)
		        })
		      },
		      // 深度观察监听
		      deep: true
		    }
		 },

备注： 以上就是所有代码啦，本文所提供的方法可适用于所有vue工程项目，可解决vue-router 所提供方法 scrollBehavior 和 keepAlive不生效等问题。