什么是< 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.

如果绑定键到 $ 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屋！