Menu
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?
369
The RouterView or router-view component is used to display the current route the user is at.
May 13, 2020. The router-link component creates an <a> tag that's configured to work correctly with Vue router.
With Vue Router, you can use its router. push() function to programmatically navigate between routes on your site. You can either call push() with a string path, or with an object containing either the path or name of the route.
Installing Vue Router for Vue 3 Like many frameworks, Vue has its own CLI. So at first, you need to install it using NPM or Yarn. Then you can create a new project using the vue create <project-name> command. After executing it, the CLI prompts with several options as follows.
$route.fullPathis defined as The full resolved URL including query and hash. If you bind keyto $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.
Just bind the component key property to a reactive data source. In the case of router changes, you can bind the router-view to the $route.fullPath as follows: Now, any time the full path changes, the router-view will be updated. This work is licensed under a Creative Commons Attribution 4.0 International License.
Sometimes, your Vue route will change, but will not trigger your router-view to update. There is a simple way to tell the router-view, or any component, to update. Just bind the component key property to a reactive data source.
The full resolved URL including query and hash. A string that equals the path of the current route, always resolved as an absolute path. e.g. "/foo/bar". Show activity on this post. path: A string that is equal to the path of the current route, always resolved as an absolute path.
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.
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
