使用页面缓存

路由 添加 meta -> keepAlive：true

{
    path: '/demo/:pageCode',
    meta: {
        keepAlive: true,
    },
    component: (resolve) => require(['@/views/demo/index'], resolve),
    hidden: true
}

app.vue添加缓存

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

<script>
    export default {
        name: 'App',
        metaInfo() {
            return {
                title: 'H5商城',
                titleTemplate: title => {
                    // return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
                    return title + '^_^'
                }
            }
        }
    }
</script>

路由添加scrollBehavior 主要是返回到 缓存页面 页面停留在上次的滚动位置 只对全局滚动有效

export default new Router({
  mode: 'history', // 去掉url中的#
  // scrollBehavior: () => ({y: 0}),
  routes: constantRoutes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return {x: 0, y: 0}
    }
  }
})

如果需要在静态页面 刷新数据什么的 添加以下方法，在路由激活时调用

activated 当组件被 keepalive 激活时调用，可以在这里重新获取数据

activated() {
    // 当组件被 keepalive 激活时调用，可以在这里重新获取数据
    this.pageCode = this.$route.query && this.$route.query.pageCode
    this.key = this.$route.query && this.$route.query.key
    // 默认选中综合排序
    this.isSelect = 'id'
    this.getList()
},
    created() {
        // 获取PageCode
        this.pageCode = this.$route.query && this.$route.query.pageCode
        this.key = this.$route.query && this.$route.query.key

        // 默认选中综合排序
        this.isSelect = 'id'

        this.getList()
    }