问题描述
我是 Vue.js 的新手，我想我对路由器如何处理以下事情有一些了解:
I'm completely new to Vue.js and I think I have a bit of understanding of how a router works with things like:
<router-link to="/">
但我并不真正理解以下行的作用:
But I am not really understanding what the following line does:
<router-view :key="$route.fullPath"></router-view>
我相信路由器视图本身可以确保显示内容，但关键部分是什么意思?
I believe router-view by itself makes sure the content is displayed but what does the key part mean?
推荐答案
参见 特殊属性 - 键
它还可以用于强制替换元素/组件而不是重用它.这在您需要时很有用:
- 正确触发组件的生命周期钩子
- 触发转换
$route.fullPath 已定义作为
完整解析的 URL，包括查询和哈希.
如果您将 key 绑定到 $route.fullPath，它将始终 强制替换" 元素/组件.
If you bind key to $route.fullPath, it will always "force a replacement" of the <router-view> element / component every time a navigation event occurs.
如上所述，这很可能是为了触发过渡/动画.
As mentioned above, this is most probably done in order to trigger a transition / animation.
这篇关于什么是<router-view :key="$route.fullPath">?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！