vue详情跳转到列表页实现列表页缓存

爸爸A提了个需求，希望微信官方账号里的商城能像app一样从产品详情页跳转到列表页等列表页，并能实现列表页缓存(数据不刷新，位置固定到上一个产品的位置)。

我最初认为应该满足scrollBehavior，但是在实践中，我发现如果列表被分页，位置将不会定位到被点击的位置

我在网上转了转，终于找到了一个合适的方法——beforeRouteLeave

注意：beforeRouteLeave仅适用于一级页面，不适用于子级中的其他二级或其他级别页面

以上是准备工作，然后我们就可以进入正题了：

找到门户安装页面：App.vue在路由器视图外包装了一个保活标签

因为不是所有的页面都需要缓存，所以向需要缓存的页面添加名称值，并添加名称值以保持活动状态

keep-alive v-if=' israoutalive ' include=' starshop ' router-view/router-view/keep-alive当然只有这些不能实现缓存。

刚开始的时候，我学的是线上的方法。我写道，当我从列表中单击详细信息页面时，我将列表页面的keepalive值设置为true(实现缓存)

beforeRouteLive(to，from，next){ if(from . path=='/sale/new goods/index ' to . path=='/goods/detail '){ from . meta . keepalive=true；this.loading=truenext()；return } else { from . meta . keepalive=false；window . location . reload()；这个。$ destroy()；next()；Return }}，但后来爸爸A发现了一个bug:我从List I点击了详细信息后，如果直接点击详细信息页面，就会点击另一个店铺列表页面，即List II。列表页面显示的最新产品列表是之前的数据，但并没有变成最新的店铺列表内容，即列表二显示的产品仍然在列表一中。

等我玩大了，这个问题就更急了。如果我把顾客和不买东西的人混为一谈，我的罪过不会很大吗

晚上，月明夜静，我苦苦思索，终于挖出了这个社会的毒瘤

我绝不逊色于父亲的傲慢，只是因为我对技术的执着，对完美的过分追求，以及对这么大的空子不谈我的事情的宽容。

直接来这里看解决方案。

首先，放弃上面列表页面的方法

第一步：找到产品详细信息页面，这是最主要的角色之一。我在这里使用了以前的路由器和以前的路由器

beforeRouteEnter，from，next){ next(VM={ VM . form URl=from . path；console . log(VM . FOrmURl)})；}，BeforeRouteLive(to，from，next){ to . meta . keepalive=false；if(to . path==this . form URl){ to . meta . keepalive=true；next()；return } else { to . meta . keepalive=false；window . local storage . remove item(' IsRefresh ')对此。$ destroy()；next()；Return }}，beforeRouteEnter:进入路线前执行的函数(获取列表1中的路线)

BeforeRouteLeave:离开路线前执行的功能(获取列表2中的路线)

通过这两个钩子，你可以成功获得事件的另外两条主角路线(列表1和列表2)

在详细信息页面中，在离开页面之前，比较before routine中列表1和列表2的路由。

如果两条路由相同，to.meta.keepAlive的值为true，并且缓存列表页(例如，从详细信息页返回时)

如果两条路线不同，跳转目的地页面发生了变化(例如从鞋帽列表——鞋货列表——鞋单)，因此不需要缓存鞋单页面，而是需要刷新获取最新的鞋单数据

第二步：处理事件第二主角——的列表页面

在这里，我只使用了beforeRouteEnter

在这个钩子中，我们可以得到当前页面的keepAlive值

详细信息页面中已经给出了该值

如果为真，则表示缓存；否则，意味着不缓存(刷新)

为了防止页面一直刷新并变成死函数，我们需要在数据中声明一个变量isRefresh

isRefresh : window . local storage . getitem(' isRefresh ')| | TrueBeforeRouter(to，from，next){ next(VM={ if(to . meta . keepalive！=true to.meta.keepAlive！=null){ VM . goods=[]；window . local storage . setitem(' isRefresh '，true)if(JSON . stringify(window . local storage . getitem(' isRefresh '))！=false){ window . local storage . setitem(' IsRefresh '，false)location . reload()；} } });Return}，如果当前页面to.meta.keepAlive值不为真且该值存在，则需要刷新页面

防止页面一直刷新，

window . local storage . setitem(' isRefresh '，true)设置缓存变量isRefresh，值为true(表示需要刷新)

当to.meta.keepAlive值不为真且isRefresh值为真时，页面被刷新，isRefresh值为假，即刷新被关闭

VM . goods=[]；但是，在页面跳转到新的列表页面并刷新之前，会显示一个简短的列表。为了避免不必要的误导，当我检测到我跳转到新的列表页面时，我会对列表页面的商品列表进行更好的视觉体验。

它因项目而异，如果不需要可以删除

在多个页面之间跳转，以确定是否需要缓存或刷新来获取新数据。好了

也许是因为业务需求不同，技术处理方法可能不同。希望能对你有所帮助或者给你一些启发，希望你多多支持我们。