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

【问题标题】：Vue router not firing if only slug changes如果只有 slug 更改，Vue 路由器不会触发
【发布时间】：2018-12-13 19:50:18
【问题描述】：

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

我有以下链接

<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 的链接，URL 将会改变，但不会发生其他任何事情。没有axios 电话等。

如果我点击Tag 3，URL 会改变，但不会发生其他任何事情。没有axios 电话等。

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

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

【问题讨论】：

我猜我只是为 slug 添加了一个观察者并触发请求？
你可以这样做。 Here是官方文档中的完整解释。

标签： vue.js vuejs2 vue-router

【解决方案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

【讨论】：

感谢康拉德，非常有帮助