javascript - 为什么我的 vue-router 链接偶尔会导致错误页面(或根本不起作用)？

Question

我在使用 Vue Router 的 Vue.js 单页应用程序中有一个奇怪的错误，我的链接有时不会指向正确的页面，尽管确定目标页面的变量是正确的。

这比描述的更好看，所以我已经在当前状态下部署了应用程序。转至 http://daggy1.watchduck.net/nodes/2并单击父/子部分中的链接，然后在它引导您的页面上再次执行相同操作。您会发现有时您访问的页面不正确，有时链接根本不起作用。顶部完整列表中的链接始终工作正常。

Devtools 已启用，并且单击 ( a click b ) 和页面更改 ( a ----> b ) 都会记录到控制台。



在屏幕截图中可以看到，单击第 11 页上的链接 9 会导致第 2 页而不是第 9 页。

我已将代码上传到 GitHub:https://github.com/watchduck/daggy

完整列表的链接在
Nodes.vue

<router-link v-for="node in nodes"
             :to="{name: 'node', params: {id: node.id, name: node.name}}"
             tag="li"
             active-class="active">
    <a>{{node.id}}: {{node.name}}</a>
</router-link>

而那些有问题的人在
NodeRelatives.vue .

<router-link v-for="relative in relatives"
             :to="{name: 'node', params: {id: relative.id, name: relative.name}}"
             tag="li"
             @click.native="clickDebug(relative.id)">
    <a>{{relative.id}}: {{relative.name}}</a>
</router-link>

两者 Nodes.vue和 NodeRelatives.vue用于
Node.vue .

发生的事情以两种方式记录到控制台:

clickDebug在 NodeRelatives.vue记录当前页面和点击的链接 ( a click b )。

Node.vue中的观察者记录最后一页和新页 ( a ----> b )。

当然，我想知道如何使我的链接行为正确。

但我也会很高兴提示如何找到这样的错误。如何调试 Vue.js 应用程序是一个经常被问到的问题——答案往往是“使用 Chrome 扩展”之类的。如果有人可以使用 Chrome 扩展程序解决这个问题，我很乐意看到。我相信一些调试截屏视频会对很多人非常有帮助。

编辑 1:正如 Slotheroo 指出的那样，问题与 tag="li" 有关。属性和嵌套的 anchor 标记 router-link .
我删除了它们，并使用新代码添加了一个单独的前端:
旧: http://daggy1.watchduck.net/nodes/2
新: http://daggy1a.watchduck.net/nodes/2

它位于一个名为 simple-router-links 的单独分支中。在 GitHub 上:
NodeRelatives.vue

(仅仅避免这个问题当然不是我正在寻找的解决方案。)

最初我们认为 li 的事件监听器导致问题，但事实证明那只是 clickDebug监听器 - 在问题已经存在时添加。

编辑 2:这种行为并不像看起来那么零星:

重新加载页面后，所有链接都有效。

从 http://daggy1.watchduck.net/nodes/9 开始，单击父级 2，单击父级 1。链接 1 不起作用。 (同样从 2 的任何 child 开始，即 3、4、5、9。)

从 http://daggy1.watchduck.net/nodes/10 开始，单击父项 1，单击子项 2。链接 2 指向 13。

从 http://daggy1.watchduck.net/nodes/1 开始, 单击 child 2，单击 parent 1, 2, 1, 2, 1... 永不失败。 (同样以 10 开头。)

编辑 3:当对后端的 Axios 调用替换为静态数据时，它起作用: http://daggy1b.watchduck.net/nodes/2
该代码位于一个名为 static-data 的单独分支中。在 GitHub 上，后来缩减为最小版本
( 1c ):
https://github.com/watchduck/daggy/tree/static-data/front/src

当设置超时时 getNodeRelatives() ，问题又来了。令人惊讶的是，即使延迟设置为 0:

getNodeRelatives() {
    let f = () => {
        this.relativesInBothDirections = this.$store.state.nodeRelatives[this.id]
    }
    setTimeout(f, 0)
}

编辑 4:当从断开的链接中删除事件监听器时，它将起作用。下面的屏幕截图显示了如何删除从断开的链接到第 1 页的事件监听器。再次单击它会进入第 1 页 - 但作为页面的硬重新加载，而不是在应用程序内。



编辑 5:我打开了一个问题: https://github.com/vuejs/vue-router/issues/2305
为此，我使用静态数据最小化了版本: http://daggy1c.watchduck.net/nodes/2

Answer 1

这肯定是一个奇怪的问题。我还没有完全整理出来，但我会分享我所学到的。

对于故障排除试试这个:

打开Vue开发者工具

单击路由器链接组件，这会将路由器链接组件设置为可在控制台中以 $vm0 访问。

转到控制台并输入 $vm0.to.params.id并按回车键。这应该显示链接的目标 id 的预期值。例如1

通过键入类似 $vm0.to.params.id = 7 的内容来更改目标 ID (假设该值以前不是 7)

单击窗口中的链接，它现在应该转到/nodes/7 而不是之前设置的任何位置。

奇怪的是，它适用于顶部的 13 个节点链接，但不适用于节点亲属( parent /子女)。更改 to 参数的 id 不会影响单击链接将我们带到何处。

故障排除第 2 部分:

右键单击普通浏览器窗口中的节点链接之一并检查它。这应该会打开开发工具中的元素选项卡。

单击事件监听器子选项卡。我们可以看到 <a> 上的 click 事件有一个监听器。标签

现在右键单击并检查相关链接之一。

在这里查看单击事件的事件监听器时，我们可以看到有两个——一个用于 <a>标签和一个用于 <li>标签

这让我觉得也许那些监听器以某种方式触发了不同的事件，也许是 <li>上的监听器。指向错误位置的标记。

我拥有的另一条观察证据是，当一条路线转到错误链接时，它通常是上一页的正确链接。我会解释我的意思。

第一个 View :我正在查看节点 5 的页面。它具有节点 2 的父节点、子节点 7 和节点 8。请注意，节点 7 是列出的第一个子节点。

我们点击节点 2

第二个 View :我们现在在节点 2 的页面上。它有节点 1 的父节点和节点 9、4、5 和 3 的子节点。注意节点 9 是列出的第一个子节点。如果我们单击节点 9，它会将我们带到节点 7，它应该是上一页中正确的第一个子节点!这表明链接没有正确更新，即使页面上的数据看起来像是刷新了。

我建议继续故障排除的事情:

删除相关节点的路由器链接的 tag="li"部分，然后查看它们如何呈现

尝试使您遍历节点亲属的方式与您遍历节点的方式相似

尝试在路由器链接上而不是在 tr 上迭代

尝试将静态数据传递给节点相关组件。我想知道 axios 调用是否存在某种延迟，导致路由器链接信息和数据之间存在某种不匹配。