javascript - What is <router-view :key="$route.fullPath"> ?

Question

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?

Answer 1

See Special Attributes - key

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

• Properly trigger lifecycle hooks of a component
• Trigger transitions

$route.fullPath is defined as

The full resolved URL including query and hash.

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.