首頁猿問關(guān)于vue返回當(dāng)前位置的問題？

關(guān)于vue返回當(dāng)前位置的問題？

月關(guān)寶盒 2018-06-21 13:13:10

進(jìn)入列表頁之后，自動請求后臺數(shù)據(jù)，然后點擊進(jìn)入詳情頁，再返回的時候，想記住上一次列表頁的位置，如何實現(xiàn)？目前遇到了問題：1：采用哪種方式去實現(xiàn)這個效果1：從詳情頁返回列表頁的時候，每次都會自動請求數(shù)據(jù)，導(dǎo)致根本無法記住位置

查看完整描述

2 回答

紅糖糍粑

TA貢獻(xiàn)1815條經(jīng)驗獲得超6個贊

router.js

// router用historyconst appRouter = {  mode: "history",  routes: [
    {      path: "/list",      name: "list",      component: List,      meta: {        keepAlive: true //不刷新
      }
    }
  ]
}

App.vue入口文件添加keep-alive

<template>
   <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></template>

反對回復(fù) 2018-07-15

慕萊塢森

TA貢獻(xiàn)1810條經(jīng)驗獲得超4個贊

解決方法主要是記錄位置，上面幾位都說的很清楚了，如果用的vue-router的話，可以放到meta中記錄位置
1、頁面離開時

  beforeRouteLeave (to, from, next) {    // 這里寫自己獲取的位置
    let position = document.getElementById('vux_view_box_body').scrollTop    if (to.path === '/home') {      from.meta.position = 0
    } else {      from.meta.position = position
    }
    next()
  }

2、回來當(dāng)前頁面，在mounted中$nextTick或setTimeout后scrollTo(0, position)

反對回復(fù) 2018-07-15