为什么我的Vue-Router链接偶尔会导致错误的页面（或根本无法工作）？

时间：2018-07-13 21:03:36

标签： javascript asynchronous vuejs2 vue-router event-listener

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

这比描述的要好看，因此我已将其部署为当前状态。转到http://daggy1.watchduck.net/nodes/2，然后单击“父母/孩子”部分中的链接，然后在引导您的页面上再次执行此操作。您会发现有时转到的页面不正确，有时链接根本不起作用。顶部完整列表中的链接始终可以正常工作。

启用了开发工具，并且单击（a click b）和页面更改（a ----> b）均记录到控制台。

enter image description here

在屏幕截图中可以看到，单击页面 11 上的链接 9 导致页面 2 而不是 9 < / em>。

我已将代码上传到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"属性和router-link中的嵌套锚标记有关。 我删除了它们，并使用新代码添加了单独的前端：
旧版：http://daggy1.watchduck.net/nodes/2 新增：http://daggy1a.watchduck.net/nodes/2

它在GitHub上名为simple-router-links的单独分支中： NodeRelatives.vue

（避免出现问题当然不是我正在寻找的解决方案。）

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

编辑2：行为不像看起来那样零星：

编辑3：：将对后端的Axios调用替换为静态数据后，它将起作用：http://daggy1b.watchduck.net/nodes/2
该代码位于GitHub上名为static-data的单独分支中，后来被简化为最低版本。 （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页-但会作为页面的硬重载，而不是在应用程序内。

enter image description here

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

1 个答案:

答案 0 :(得分：2)

这肯定是一个奇怪的问题。我还没有完全解决问题，但是我将分享我所学到的知识。

要进行故障排除，请尝试以下操作：

  1. 打开Vue开发人员工具
  2. 单击路由器链接组件，这会将路由器链接组件设置为可在控制台中以$ vm0访问。
  3. 转到控制台并键入$vm0.to.params.id，然后按Enter。这应该显示链接的目标ID的期望值。例如1
  4. 通过键入类似$vm0.to.params.id = 7的方式更改目标ID（假设以前的值不是7）
  5. 单击窗口中的链接，它现在应该转到/ nodes / 7，而不是以前设置的位置。

这很奇怪，它适用于顶部的13个节点链接，但不适用于节点的亲戚（父母/子女）。更改to参数的id不会影响单击链接将我们带到何处。

第2部分：

  1. 右键单击普通浏览器窗口中的节点链接之一，然后对其进行检查。这应该在开发工具中打开elements选项卡。
  2. 单击事件侦听器子选项卡。我们可以看到<a>标签上的click事件只有一个侦听器
  3. 现在右键单击并检查亲戚链接之一。
  4. 在这里查看click事件的事件侦听器时，我们看到有两个-一个用于<a>标签，另一个用于<li>标签

这使我认为也许那些监听器以某种方式触发了不同的事件，也许是<li>标签上的监听器将错误的位置定向到了。

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

第一个视图：我正在查看节点5的页面。它的父节点为Node 2，子节点为Node 7，节点8为节点。请注意，这里的节点7是列出的第一个子节点。

我们点击节点2

第二个视图：我们现在在节点2的页面上。它具有父节点1和子节点9、4、5和3。请注意，节点9是列出的第一个子节点。如果单击节点9，则将我们带到节点7，这将是上一页中正确的第一个孩子！这表明即使页面上的数据看起来好像刷新了，链接也仍然无法正确更新。

我建议继续进行故障排除的事情：

  • 删除相关节点的路由器链接的tag =“ li”部分，然后查看它们如何呈现
  • 尝试使您遍历节点亲戚的方式与您遍历节点的方式类似
    • 尝试在router-link而不是tr上进行迭代
  • 尝试将静态数据传递给节点亲戚组件。我不知道axios调用是否存在某种延迟，从而导致路由器链接信息与数据之间存在某种不匹配。
相关问题
最新问题