nuxt下自定义key时候，缓存有问题

[jktantan]

Bug 描述

在nuxt框架下，如果使用自定义key值，缓存会失效。

问题重现

重现行为的步骤：

1. 使用nuxt框架
2. 使用自定义key规则，规则如下：/:linkCode/xxxx/xxxx，此linkCode为动态生成，即所有linkCode下的页面都在同一个tab中打开。
3. 操作
   3.1 打开两个tab页面，在页面中的input输入数据，然后切换，在此操作下，缓存正常。
   3.2 切换其中一个tab页面，在input中输入数据，然后在此页面中点击连链接，并在当前tab中跳转到新的页面中，再点击返回。此时缓存没了，之前在input中输入的数据被清空。
   3.3 同上一步，跳转到新页面中后，在新页面的input中输入数据，然后点击其他tab切换到新tab，再切换回来，页面中的input的数据被清空，缓存失效。

问题估计

在查看代码中发现，可能是因为自定义的key因为key值相同，但跳转的时候又因为fullpath不同，所以清空了缓存。

开发环境（请填写以下信息）

• nuxtjs

[bhuh12]

使用自定义key规则，规则如下：/:linkCode/xxxx/xxxx，此linkCode为动态生成，即所有linkCode下的页面都在同一个tab中打开。

没明白，可以提供完整的 meta 配置吗？
另外，这个是配置在 页面 还是 路由 中？

[bhuh12]

大概明白了

RouterTab 一个页签只会有一个缓存，如果多个路由公用一个页签，只会缓存最后一个，并不会缓存每个路由

[jktantan]

大概明白了

RouterTab 一个页签只会有一个缓存，如果多个路由公用一个页签，只会缓存最后一个，并不会缓存每个路由

恩，我看了一下源代码，你是把key值和缓存的key是同一个。我现在自己处理了一下代码，自己管理缓存。

[bhuh12]

那我先发布版本修复上一个问题吧。
这个是方案设计如此，应该不算问题

[jktantan]

恩，这个应该不算问题。不过我还是提个建议，希望能有提供一个手工控制缓存的方案（我那种情况，有reuse也不管用）。我现在的临时方案其实也是改了你的代码的。 ***@***.*** 发件人： 碧海幽虹 发送时间： 2021-11-05 15:06 收件人： bhuh12/vue-router-tab 抄送： jktantan; Author 主题： Re: [bhuh12/vue-router-tab] nuxt下自定义key时候，缓存有问题 (Issue #132) 那我先发布版本修复上一个问题吧。 这个是方案设计如此，应该不算问题 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[bhuh12]

对的，目前页签和组件缓存是共用一个 key 的，单个页签最多只维护一个缓存。

你这种场景更建议同一个路由用多页签多缓存，切换也更容易更直观。

同一个页签内部再维护多份缓存，操作上其实也很不直观的，用户如果不关闭也会占用更多内存。

reuse 组件复用，是同一个路由不同参数切换后不销毁，复用之前的组件实例。
如果想用这个实现的话，需要你自己处理数据缓存，路由参数切换后还原数据。

[jktantan]

唉，不对啊，这样来说，你的reuse是有问题啊，我看代码你的reuse是以fullpath而还是path判断的。我这给个场景给你看看。 通用地址：/:linkCode/xxxx/xxx/xx,即所有linkCode相同的都为同一个tab.reuse为开启状态 1. 先进入：/:linkCode/xxxx/a 这个地址，输入些内容。 2. 再进入： /:linkCode/xxxx/b ，并输入些内容。 3. 再跳回: /:linkCode/xxxx/a?id=xxxx，这个时候是带上了query。但是之前输入的内容被清空了。 4. 同样：当我再跳回这个：/:linkCode/xxxx/b?id=xxxx，时，b的内容也是被清空了。 我在调试的时候，发现，如果之前之后的fullpath地址是相同，reuse是生效的，但如果之前之后的path一样但是fullpath(即带参)的情况下，reuse是不生效的。 不过我用的nuxt做的，麻烦您看看是不是vue没有这问题，还是说是我这边用法错误？ ***@***.*** 发件人： 碧海幽虹 发送时间： 2021-11-06 14:15 收件人： bhuh12/vue-router-tab 抄送： jktantan; Author 主题： Re: [bhuh12/vue-router-tab] nuxt下自定义key时候，缓存有问题 (Issue #132) 对的，目前页签和组件缓存是共用一个 key 的，单个页签最多只维护一个缓存。 你这种场景更建议同一个路由用多页签多缓存，切换也更容易更直观。 reuse 组件复用，是同一个路由不同参数切换后不销毁，复用之前的组件实例。 如果想用这个实现的话，需要你自己处理数据缓存，路由参数切换后还原数据。 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[bhuh12]

reuse 的前提是，路由使用的组件是同一个。如果不是的话是不会共用的

[jktantan]

恩，能确定是同一个组件 ，但是query值 不一样，我之前是发现在query值在一致的时候，缓存是生效的，但query值不一致的时候，缓存不生效。比如/aaaa/bbb和/aaaa/bbb?id=1，这两个地址，组件是同一个，但是就是缓存不生效。
在测试的时候，发现，如果跳出之前是/aaaa/bbb，跳回的时候也是/aaaa/bbb，走的是actived。但如果跳回的时候加了query，如：/aaaa/bbb?id=1，那么就会走mounted。

[bhuh12]

路由页签相关配置发一下我看看

[jktantan]

这个是router-tab的配置

这个是meta的配置，我放到mixin里面统一处理

这个是beforeRouteLeave的配置。
逻辑如下:

1. 开发人员还是使用原始的地址.
2. 在beforeRouteLeave里面判断地址中有没有linkCode。没有的话就读取保存的linkCode，并加到地址上，再next,用来确保是在同一个tab中显示。
3. 如果加上后还是没有匹配的就跳到404页面。

[jktantan]

我大约知道是什么原因，仔细看了一下代码，你那边即使设置了reuse，实际判断缓存的时候用的是fullpath。而我要实现的东西其实是要按path来判断才会是正确的。所以。。。。