nuxt中使用keepAlive实现详情页回列表页，列表页缓存并定位

1.在nuxt的layouts下的文件中。设置keepAlive，并用vuex缓存下变量includePageNames

<template>
...
<nuxt keep-alive :keep-alive-props="{include: includePageNames}" />

</template>

<script>
get includePageNames() {
return this.$store.state.dictionary.includePageNames
}
</script>

2.在需要缓存的列表页应该该布局。

并且在页面添加路由守卫，当页面离开时，判断是否需要缓存。需要则将类名加入到vuex中的变量includePageNames

beforeRouteLeave(to: any, from: any, next: any) {
    console.log(to)
    if (to.name.includes('phone')) {
        this.scrollTop = window.scrollY
        this.isKeepAlive = true
        this.$store.dispatch('dictionary/setIncludePageNames', ['PhonePage'])
    } else {
        this.$store.dispatch('dictionary/setIncludePageNames', [])
    }
    console.log(this)
    next()
}

3.列表再次回到的时候，可以通过activated来刷新数据源。此功能复用率较高，直接封装进了common-table中。只需要在步骤2中，离开时设置scrollTop、和是否开启isKeepAlive两个值传进组件即可。

activated() {
    // 增加；列表跳详情后，返回保持原有位置
    if (this.isKeepAlive) {
        this.getData(this.currentPage)
        this.$nextTick(() => {
        window.scrollTo(0, this.lastScrollY)
        })
    }
    console.log(this.tableData)
}

point1：Nuxt中不同布局页面间跳转，设置keepAlive是没用的

探索过程

【初始做法】在layout中增加alive.vue文件，和sider.vue是一样的。唯一的区别就是nuxt标签只增加一个keep-alive属性。如下

<nuxt keep-alive />

这样的写法，意味着应用到这个布局的页面都会被缓存。于是列表页应用了alive.vue，在详情页用的还是sider.vue

【结果】列表页跳转详情页，再回到列表页时并没有缓存上

【解决方案】详情页也应用这个布局时，缓存生效

【原因】nuxt中跳转到不同的布局页面时，相当于加载了新nuxt组件。

【结果】当列表页和详情页都用了这个布局，他们之间互相跳转就会缓存。那每次跳转看到的页面是不变的。

【解决方案】 详情页跳走时，beforeRouteLeave里将这个页面销毁

point2：keepAlive的组件使用destory()销毁后就无法再缓存

探索过程

【初始做法】针对只有列表页跳详情页，再回到列表页才缓存，其余页面进入时无需缓存。 

// 列表页 也需要判断是否需要缓存，如果跳去其他页面则不缓存
beforeRouteLeave(to: any, from: any, next: any) {
    this.scrollTop = window.scrollY
    if (!to.name.includes('phone')) {
        this.$destroy()
    }
    next()
}

【结果】列表页一旦销毁过，之后访问的都是新列表页

【原因】keepAlive中有include和exclude  这两个属性控制缓存或不缓存哪些页面（组件）

  两个属性传入的值是页面（组件）名称

【解决方案】在布局文件中加上这个属性，并将这个数组放到vuex中管理

 【最后】

1. 也不需要额外增加布局文件
2. 详情页也无需加销毁逻辑

Point3：webpack打包后会导致keepAlive上失效

【原因】webpack打包时将组件名压缩，导致keepAlive里对应不上

【解决方案】

// nuxt.config.js 里的build配置下的terser
terserOptions: {
keepFnames: true
}