第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

vue route-link跳轉(zhuǎn)之后再返回記錄剛剛訪問的位置(圖片列表頁)

vue route-link跳轉(zhuǎn)之后再返回記錄剛剛訪問的位置(圖片列表頁)

開心每一天1111 2018-12-20 18:14:34
1.vue頁面跳轉(zhuǎn)之后記錄跳轉(zhuǎn)之前的位置,返回之后繼續(xù)回到剛剛訪問的位置(單頁面應(yīng)用)2.這是我在created里面的代碼,能拿到scrollTop值,就是返回之后設(shè)置不上let ls = window.localStorage;            if (ls.getItem('sTop')) {                let oldStop = ls.getItem('sTop');                // 獲取到的值來設(shè)置頁面滾動條的位置                if (document.documentElement.scrollTop) {                    document.documentElement.scrollTop = oldStop;                } else {                    document.body.scrollTop = oldStop;                }            } else {                console.log('抱歉,找不到滾動條的值');            }            // 監(jiān)聽頁面滾動條的狀態(tài)(是否滾動)            window.addEventListener('scroll', function() {                // 滾動時(shí)獲取頁面滾動條的位置                var sTop =document.body.scrollTop || document.documentElement.scrollTop;                console.log(sTop)                // 滾動條的位置保存到本地存儲里面                ls.setItem('sTop', sTop);            }, false);3.似乎沒看到任何不妥之處啊
查看完整描述

1 回答

?
冉冉說

TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個(gè)贊

1.在router.js里面,

scrollBehavior(to, from, savedPosition) {


    if (savedPosition) {

    //真正起作用的是這里,else里面的if刪除了,免得誤導(dǎo)

        return savedPosition

    } else {

        return { x: 0, y: to.meta.savedPosition || 0 }

    }

},

2.在router.js里面需要記錄位置的單頁面里面


meta: {

  title: '列表頁',

  keepAlive:true

},

3.App.vue里面

<div id="app">


  <keep-alive >

      <router-view v-if="$route.meta.keepAlive"></router-view>

  </keep-alive>

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

</div>

這樣寫的意義就是不緩存所有頁面,哪個(gè)地方寫了 keepAlive:true,哪個(gè)地方就記錄位置(加緩存)

4.位置確實(shí)記錄上了(加緩存,返回不刷新頁面),也就是說,返回不觸發(fā)created,所以有些頁面需要返回觸發(fā)的東西都寫在activated里面。其實(shí)整個(gè)過程很簡單,代碼也很干練,因?yàn)檫@是路由自帶的功能,只不過之前沒有發(fā)現(xiàn)罷了


查看完整回答
反對 回復(fù) 2019-01-22
  • 1 回答
  • 0 關(guān)注
  • 1610 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號