如果只有 slug 更改，Vue 路由器不会触发

Question

出于某种原因，在我的 Vue 应用程序中，当 linked 页面仅更改 slug 时，我遇到了路由器问题。例如

我有以下 links

<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 请求以获取所有标签。类别等的相同功能

假设当前 URL 是 http://test.com/tag/tag1

如果您单击 Tag 2 的 link，URL 将发生变化，但不会发生其他任何事情。没有 axios 个电话等

如果我点击 Tag 3，URL 将会改变，但没有其他任何反应。没有 axios 个电话等

如果我点击 Category 1 然后 url 发生变化，页面加载类别视图并触发其轴请求。

如果只有 slug 发生变化，为什么会出现问题？

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

如果只有 slug 更改，Vue 路由器不会触发

Vue router not firing if only slug changes

vue.js

vue-router

vuejs2