Question

由于某种原因，在我的Vue应用程序中，当链接页面仅更改该段时，路由器出现问题。例如

我有以下链接

<router-link :to="{ path: '/tag/tag2' }">Tag 2</router-link>
<router-link :to="{ path: '/tag/tag3' }">Tag 3</router-link>
<router-link :to="{ path: '/category/cat1' }">Category 1</router-link>

由router

处理

{
  path: '/tag/:slug',
  name: 'Tag',
  component: () => import('./views/tag')
}

在views/tag.vue内的

加载时，会发出axios请求以获取所有标签。类别等功能相同

可以说当前网址为http://test.com/tag/tag1

如果您单击Tag 2的链接，则URL将会更改，但是没有其他反应。没有axios个电话等

如果我单击Tag 3，则URL将会更改，但是没有其他反应。没有axios个电话等

如果我单击Category 1，则URL会更改，页面会加载类别视图并触发其轴请求。

如果只有子弹在变化，为什么会有问题？

Answer 1

我相信您的axios调用位于组件的生命周期挂钩之一（即beforeCreate）中。问题在于，Vue Router会尽可能重用组件。在您的情况下，从/tag/tag1到/tag/tag2，唯一改变的是参数，因此它仍然是相同的组件，路由器不会再次创建它。

有两种解决方案：

将axios调用放置到beforeRouteUpdate挂钩中，这意味着每次组件中的路线更改时，它们都会被触发。
向key添加router-view属性，这将使路由器重新创建每个组件。

<router-view :key="$route.fullPath"></router-view>

来源：A post from a member of the core team of Vue'js

如果只是更改，Vue路由器就不会触发

1 个答案: