vue 如果让页面来回跳转，但数据不变

Question

我当前场景是，产品搜索页 /search?a=b&c=d 与 产品详情页 /item/123 都是在同一个 router-view ;

我想要效果是，列表页跳转详情页，再跳回来，列表页不刷新

两个页面路由如下

children: [
    {
        path: 'search',
        name: 'search',
        meta: {
            title: '商品搜索',
            keepAlive: true
        },
        component: _import('xx')
    },
    {
        path: 'item/:skuid',
        name: 'detail',
        meta: {
            title: '商品详情',
            keepAlive: false
        },
        component: _import('xxx')
    }
]

搜索页面监听 $route（如下代码），一有变化就加载产品列表，

watch: {
    '$route': {
         handler: 'getProduct',
         immediate: true
     }
}

搜索一下网上很多提到用 keep-alive结合mate.keepAlive实现，但我不明白原理，并且下面写法并不能实现想要效果

<keep-alive>
    <router-view></router-view>
</keep-alive>

第一次用前端框架，很多概念都不怎么理解，看文档有点懵逼

我的思路是不是错了，或者是写法错误，希望得到指点，拜托了

Answer 1

题主是想要有keep-alive的缓存效果，但是如果数据发生变化，就更新列表，是不是？

其实，kepp-alive钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。vue keep-alive生命周期描述

所以，题主，只要把create钩子中的获取数据逻辑放置到activated中即可，而且是完全的响应式

Answer 2

我之前做过类似的，使用keep-alive，在路由里面的meta在定义是否需要缓存：
https://segmentfault.com/q/10...

Answer 3

https://cn.vuejs.org/v2/guide...

Answer 4

在App.vue中的view外面包keep-active，js代码同一楼所说

Answer 5

<keep-alive include="a,b">
<!-- 将缓存name为a或者b的组件-->
<component :is="view"></component>
</keep-alive>