Vue由内容返回列表页保留滚动位置

原创已于 2022-04-12 09:50:09 修改 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

于 2022-03-08 09:50:51 首次发布

Millia‘s work 专栏收录该内容

54 篇文章

订阅专栏

本文探讨了在Vue.js应用中如何在列表页和详情页之间切换时保持或重置滚动条位置。通过使用`<keep-alive>`组件和`router.beforeEach`、`router.afterEach`钩子，以及监听滚动事件，实现了列表页到详情页返回时滚动条位置的保留，而从其他页面返回列表页时滚动条回到顶部。同时，文章详细展示了`list.vue`和`detail.vue`组件的关键代码实现。

需求：

列表页到详情页，详情页返回列表页保留列表页滚动条位置，其他列表页到详情页，详情页跳转列表页滚动条返回顶部。

router.js

 routes: [
    {
      path: '/list',
      name: 'list',
      meta: { 
        keepAlive: true // 需要缓存 
      },
      component: function (resolve) {require(['@/view/list.vue'], resolve)},
    },
    {
      path: '/detail/:orderid', //详情页
      name: 'detail',
      component: function (resolve) {require(['@/view/detail.vue'], resolve)
    },{
      path: '/intro', //活动介绍
      name: 'intro',
      component: function (resolve) {require(['@/view/intro.vue'], resolve)},
    },{
      path: '/rank', //排行榜
      name: 'rank',
      component: function (resolve) {require(['@/view/rank.vue'], resolve)},
    },
]

App.vue

<template>
  <div id="app">
    <!-- <router-view/> -->
    <keep-alive>
	    <router-view v-if="$route.meta.keepAlive"></router-view>
	</keep-alive>
	<router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

list.vue（列表）

<template>
<div id="millia">

<!--其他代码-->

</div>
</template>
<script>
export default {
  name: 'list',
  data(){
    return{
      scroll:0,//滚动量（必须）
    }
  },

  mounted(){
    //监听窗口滚动
    window.addEventListener('scroll', this.handleScroll);
  },
  methods:{
    
    <!--其他代码-->

    //监听返回滚动条
    handleScroll(){
      this.scroll  = document.documentElement && document.documentElement.scrollTop
      //console.log(this.scroll)
    },
    //去详情页
    goDetails(event){
      this.$router.push({
        name:"detail",
        params:{
          orderid:event,//用于通知详情页获取内容的id
          isList:"isList" //通知内容页是由列表页跳转(必须)
        }
      })
    },

    //监听isScroll参数,判断是否是 其他页-->详情页-->列表页 需返回顶部
    isTop(){
      console.log(this.$route.params.isScroll)
      if(this.$route.params.isScroll){
        window.scrollTo(0,0);
      }
    }
  },
  activated() {
    this.isTop();
    if(this.scroll > 0){
      window.scrollTo(0, this.scroll);
      this.scroll = 0;
      window.addEventListener('scroll', this.handleScroll);
    }
  },
  deactivated(){
    window.removeEventListener('scroll', this.handleScroll);
  }
}
</script>
<style scoped>
</style>

注意：当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

detail.vue（内容页）

<template>
<div id="millia">

<!--其他代码-->

<div class="goBack" @click="goBack()">&lt; 返回首页</div>

<!--其他代码-->

</div>
</template>
<script>
export default {
  name: 'detail',
  data(){
    return{
      orderid:"",//接收传递过来的orderid用于获取详情
      isList:"",//router参数
    }
  },
  mounted(){
    //获取router参数
     this.getRouter();
  },
  methods:{
    //获取传递过来的orderid值
    getRouter(){
      this.orderid = this.$route.params.orderid;
      if(this.$route.params.isList){
        this.isList = this.$route.params.isList
        console.log(this.isList)
      }
    },
    // 返回上一页(因为有其他页跳转所以增加了参数判断，
    // 只有列表页才$router.go(-1)启用数据缓存)
    // 利用isScroll参数通知列表页是其他页跳转详情后返回列表页需要去掉滚动条保留位置回到顶部
    goback(){
      if(this.isList != "isList"){
        this.$router.push({
          name:"list",
          params:{
            isScroll:"isScroll",
          }
        })
      }else{
        this.$router.go(-1)
      }
    }
  },
}
</script>
<style scoped>
</style>

补充：如果在main.js里设置了滚动需要注释掉

router.beforeEach((to,from,next)=>{
  // document.body.scrollTop = 0;
  // document.documentElement.scrollTop = 0;
  // window.pageYOffset = 0;
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next();
});
router.afterEach((to, from) => {
  //window.scrollTo(0,0)
});