Vue路线更改，但页面信息显示以前的路线详细信息

Question

我有一个带有多个指向不同页面的链接的标头，当我单击某个链接时，正文中的内容将按预期方式更改，但是当我单击diff标头链接时。我看到路线网址正确更改，但正文内容显示了上一个链接。一旦刷新，我就会看到期望的适当身体含量。我不确定问题是否在于绑定html或我如何加载显示正文内容的vue组件。

所以我的想法是我的标题链接显示在所有页面上：班级，老师，学生。当我单击“教师”时，我会看到出现在正文中的教师列表。当我单击“学生”时，我看到URL更改为学生，但是我仍然看到“教师”内容。一旦我点击刷新，我就会看到学生们的满足感。

标题：

ul
 li(v-for='link in links')
  router-link(:to='{name: "LinkPage", params...}'){{link.name}}

在我的查看页面中，我有：

h1 {{link.name}}

在我的脚本中：

  beforeMount(){
  //api to make call to get the details for the selected link and set it to link property which i used to load html. 
}

Answer 1

我感觉您的实施过程中缺少更多细节。

根据您显示和解释的内容，我猜想您有beforeMount钩子的组件正在重新用于路线更改。重复使用的组件不会再次安装。您需要改用路由器的导航卫士甚至in-component navigation guards来触发数据更新。您可以找到路由器的导航流程here的详细信息。

如果我猜对了，我建议您考虑使用专用的路线组件（每条路线一个）。您可以称他们为PageHome，PageFoo，PageBar。此外，还有nested routes的选项。

这些模式使应用的结构和导航行为更加清晰。