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

javascript html vue.js vue-router
Jordan picture Jordan · Oct 17, 2018 · Viewed 11.9k times · Source

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

Phil picture Phil · Oct 17, 2018

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.

Related questions

How to disable input conditionally in vue.js

I have an input: <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> and in my Vue.js component, I have: .. .. ready() { this.form.name = this.store.name; this.form.validated = …

Read More
Vue.js get selected option on @change

First, i want to say that im new to Vue, and this is my first project ever using Vue. I have combobox and I want to do something different based on the selected combobox. I use separate vue.html and …

Read More
Vue.js data-bind style backgroundImage not working

I'm trying to bind the src of an image in an element, but it doesn't seem to work. I'm getting an "Invalid expression. Generated function body: { backgroundImage:{ url(image) }". The documentation says to use either 'Kebab-case' or 'camel-case'. <div …

Read More