如果只有 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
,唯一改变的是参数,所以它仍然是相同的组件,路由器不会再次重新创建它。
有两种解决方案:
-
将 axios 调用放入
beforeRouteUpdate
钩子中,这意味着每次组件中的路由发生变化时都会触发它们。 -
将
key
属性添加到router-view
,这将使路由器重新创建每个组件。
<router-view :key="$route.fullPath"></router-view>
来源: 来自核心团队成员的帖子
Konrad Kalemba
2018-07-05