What is <router-view :key="$route.fullPath"> ?
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?
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.