What Is <Router-View :Key="$Route.Fullpath">

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

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.

Vue.js - update router view

This happens when you enter a route you are already on, and the component is not reloaded, even though the parameters are different. Change your router-view to:

<router-view :key="$route.fullPath" />

Vue tries to reuse components when possible, which is not what you want in this situation. The key attribute tells Vue to use a different instance of a component for each unique key rather than reusing one. Since the path is different for each set of parameters, that will make a good key.

How to keep router’s component not be reused in Vue3.0

The answer was provided as a comment by Michal Levý:

Place :key="$route.fullPath" on <component>

Vue 3 and Vue Router 4 How to pass prop when using router-view only for specific component

You could configure a route meta field just for specific routes:

// router.js
import { createRouter } from 'vue-router'
import HomePage from '@/views/HomePage.vue'

export default createRouter({
  routes: [
    {
      name: 'HomePage',
      path: '/',
      component: HomePage,

       br>      meta: {
        msg: 'Hello Foo',
      },
    },
    ⋮
  ],
})

And use it in your component via $route.meta directly in the template:

<!-- MyComponent.vue -->
<template>
  <h2>Home</h2>
  <h3>{{ $route.meta.msg }}</h3>
</template>

demo 1

Or via useRoute().meta:

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const msg = ref('')

onMounted(() => {
  msg.value = route.meta.msg
})
</script>

demo 2

---

Related Topics