vue移動端列表頁緩存不刷新

背景

在移動端列表頁中，上拉加載更多。當點擊某一條li標籤進入詳情頁，再返回時由於vue的特性，會從新加載列表頁，就會致使剛剛查看列表內容的進度。爲了解決這個問題，能夠查用keep-alive。

App.vue代碼

<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>
<script>
export default {
  name: "App",
  mounted() {}
};
</script>
複製代碼

main.js部分代碼

router.beforeEach((to, from, next) => {
  /* 路由發生變化修改頁面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  /* 從列表頁進入詳情頁則緩存列表頁，若從其餘頁面進入列表頁則不緩存列表頁。 */
  if (from.meta.cacheTo) {
    from.meta.cacheTo.forEach(item => {
      if (item.includes(to.name)) {
        from.meta.keepAlive = true
      } else if (!item.includes(to.name)) {
        from.meta.keepAlive = false
      }
    })
  }
  next()
})
複製代碼

router.js部分代碼

{
    path: '/',
    name: 'home',
    component: () => import('@/views/home/index'),
    meta: {
      title: '首頁'
    }
  },
  {
    path: '/detail',
    name: 'detail',
    component: () => import('@/views/list/detail'),
    meta: {
      title: '詳情頁'
    }
  },
  {
    path: '/list',
    name: 'list',
    component: () => import('@/views/list/index'),
    meta: {
      title: '列表頁',
      cacheTo: ["detail"], //只有從本路由進入這個數組裏的路由纔會緩存list這個頁面
      keepAlive: true
    },
  }
複製代碼

mode: 'history', // require service support
// scrollBehavior: () => ({ y: 0 }),
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
  return savedPosition
} else {
  return { x: 0, y: 0 }
  }
},
base: process.env.NODE_ENV === 'development' ? '/' : '/app',
複製代碼

結語

目前能夠解決返回刷新的問題。若有問題，再更正。