What is <router-view :key=“$route.fullPath”> ?

24
votes

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?

1
javascripthtmlvue.jsvue-router
Thank you soo much for asking this quistion!! :D I was looking now for hours for this feature!!! - Tech Nomad

1 Answers

33
votes

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.