Vue?Router?返回后記住滾動條位置的實現方法

更新時間：2023年09月07日 10:52:26 作者：悅愛克魯伊夫

使用?Vue?router?創(chuàng)建?SPA(Single?Page?App),往往有這種需求：首頁是列表頁,點擊列表項進入詳情頁,在詳情頁點擊返回首頁后,希望看到的是,首頁不刷新,并且滾動條停留在之前的位置,這篇文章主要介紹了Vue?Router?返回后記住滾動條位置的實現方法,需要的朋友可以參考下

功能一：route 返回后不刷新頁面

該功能比較常用，使用 keep-alive 即可。首先 keep-alive 包裹 router-view ,代碼如下：

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

然后，在 router.js 中，對不需要刷新的 route 項 meta.keepAlive 標記為 true，即可實現。代碼如下：

export default new Router({
  ...
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        keepAlive: true // 需要緩存
      }
    },
    {
      path: '/about',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
      meta: {
        keepAlive: false // 不需要緩存
      }
    }
  ]
  ...
})

功能二：route 返回后滾動條跳轉到離開之前的位置

為了實現該功能，在網上查找，發(fā)現 scrollBehavior 出現最多，但經過測試，只能點擊瀏覽器自帶的返回按鈕才有效，如點擊自定義的按鈕返回則失敗。繼續(xù)找，發(fā)現以下這種方法可以實現，分2步：

獲取并存儲頁面的 scrollTop value
返回頁面時取出并設置 scrollTop value

第一步：獲取并存儲頁面的 scrollTop value

首頁組件，點擊列表項 route 到詳情頁之前，先獲取存儲當前 scrollTop。查看 clickItem 方法，代碼如下：

<template>
  <div class="wrapper">
    <ul class="list">
      <li v-for="item in dataList" @click="clickItem(item)">
        {{ item }}
      </li>
    </ul>
  </div>  
</template>
<script>
  export default {
    name: 'simple-scollbehavior',
    data() {
      return {
        dataList: [
          'Start', '(′?ω?`) ', '（/TДT)/ ', '>?<',
          'o(*≧▽≦)ツ', '(? ? ?)?', '(o^?^o)?', ' (′?ω?)?',
          '(′?ω?`)', 'ヽ(?ω??)?', '(｀?ω?′)', '╰(*°▽°*)╯',
          '╮(￣▽￣)╭', '(￣▽￣)~*', '(⊙?⊙)', '====',
          '(? ??_??)?', '(′?ω?`) ', '（/TДT)/ ', '>?<',
          '╮(￣▽￣)╭', '(￣▽￣)~*', '(⊙?⊙)', 'End'
        ],
        keepScroll: 0 // 記錄離開頁面時的 scroll-positon 
      };
    },
    methods: {
      clickItem(item){
        const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
        this.keepScroll = scrollTop;
        this.$router.push('/about')
      }
    }
  };
</script>

第二步：返回頁面時取出并設置 scrollTop value

由于首頁設置了 keepAlive，頁面不會刷新所以組件內的生命周期方法都不會執(zhí)行，除了 activated 生命方法。官方說法當組件在 <keep-alive> 內被切換時，它的 activated 和 deactivated 這兩個生命周期鉤子函數將會被對應執(zhí)行。

所以，將設置 scrollTop value 寫在 activated 即可。但這里遇到一個坑，直接寫無效，必須使用 setTimeOut 延遲執(zhí)行才有效。具體原因，還有待解惑。代碼如下：

<template>
...
</template>
<script>
  export default {
    name: 'simple-scollbehavior',
    ...
    //keep-alive 中組件激活 lifecircle-func
    //注意：必須 setTimeout 才能有效 scrollTop to body
    activated() {
      var gotoScroll = this.keepScroll
      setTimeout(function(){
          //兼容 PC and Mobile 寫兩個
          document.body.scrollTop = gotoScroll;
          document.documentElement.scrollTop = gotoScroll;
      }, 10);
    }
  };
</script>

完整代碼如下：

<template>
  <div class="wrapper">
    <ul class="list">
      <li v-for="item in dataList" @click="clickItem(item)">
        {{ item }}
      </li>
    </ul>
  </div>  
</template>
<script>
  export default {
    name: 'simple-scollbehavior',
    data() {
      return {
        dataList: [
          'Start', '(′?ω?`) ', '（/TДT)/ ', '>?<',
          'o(*≧▽≦)ツ', '(? ? ?)?', '(o^?^o)?', ' (′?ω?)?',
          '(′?ω?`)', 'ヽ(?ω??)?', '(｀?ω?′)', '╰(*°▽°*)╯',
          '╮(￣▽￣)╭', '(￣▽￣)~*', '(⊙?⊙)', '====',
          '(? ??_??)?', '(′?ω?`) ', '（/TДT)/ ', '>?<',
          '╮(￣▽￣)╭', '(￣▽￣)~*', '(⊙?⊙)', 'End'
        ],
        keepScroll: 0 // 記錄離開頁面時的 scroll-positon 
      };
    },
    methods: {
      loadmore(loaded) {
        setTimeout(() => {
          this.dataList = this.dataList.concat(this.dataList);
          loaded('done');
        }, 2000);
      },
      clickItem(item){
        const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
        this.keepScroll = scrollTop;
        this.$router.push('/about')
      }
    },
    //keep-alive 中組件激活 lifecircle-func
    //注意：必須 setTimeout 才能有效 scrollTop to body
    activated() {
      var gotoScroll = this.keepScroll
      setTimeout(function(){
          //兼容 PC and Mobile 寫兩個
          document.body.scrollTop = gotoScroll;
          document.documentElement.scrollTop = gotoScroll;
          console.debug('set:' + gotoScroll)
      }, 10);
    }
  };
</script>

到此這篇關于Vue Router 返回后記住滾動條位置的實現方法的文章就介紹到這了,更多相關vue返回記住滾動條位置內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: