什么是<router-view :key="$route.fullPath">? [英] What is <router-view :key="$route.fullPath"> ?

问题描述

我是 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?

推荐答案

参见 特殊属性 - 键

它还可以用于强制替换元素/组件而不是重用它.这在您需要时很有用:

It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to:

• 正确触发组件的生命周期钩子
• 触发转换

$route.fullPath 已定义作为

完整解析的 URL，包括查询和哈希.

The full resolved URL including query and hash.

如果您将 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">?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！