开发者问题收集

如果只有 slug 发生变化,Vue 路由器不会触发

2018-07-05
2592

出于某种原因,在我的 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

如果单击 标签 2 的链接,URL 将更改,但不会发生其他任何事情。没有 axios 调用等。

如果我单击 标签 3 ,URL 将更改,但不会发生其他任何事情。没有 axios 调用等。

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

为什么只有 slug 发生变化时会出现问题?

1个回答

我相信您的 axios 调用位于组件的生命周期钩子之一中(即 beforeCreate )。问题是 Vue Router 会尝试尽可能地重用组件。在你的情况下,从 /tag/tag1/tag/tag2 ,唯一改变的是参数,所以它仍然是相同的组件,路由器不会再次重新创建它。

有两种解决方案:

  1. 将 axios 调用放入 beforeRouteUpdate 钩子中,这意味着每次组件中的路由发生变化时都会触发它们。
  2. key 属性添加到 router-view ,这将使路由器重新创建每个组件。
<router-view :key="$route.fullPath"></router-view>

来源: 来自核心团队成员的帖子

Konrad Kalemba
2018-07-05