Menu
I'd like to my "SPA" refresh when I click a link, instead of its default behavior where you see the minimal component replacement.
It sounds like I'm killing the best part of SPA, but I feel that the links without refresh cause more troubles than benefits - the worst one I suppose is that the page doesn't apparently respond if you click a link to the current page, which is rather confusing in my opinion:
<!-- You click, then of course nothing happens when you're at HelloWorld -->
<router-link :to="{name: 'HelloWorld'}">link</router-link>
520
Reload Route with Vue RouterTo reload a route with Vue Route, we can call the this. $router.go() method. If it has no arguments, then it'll reload the current route. This way, it'll notice when the path changes and it'll trigger a reload of the component with new data.
The best way to force Vue to re-render a component is to set a :key on the component. When you need the component to be re-rendered, you just change the value of the key and Vue will re-render the component.
If you're using Vue Router you'll push the new URL onto the router in order to do a redirect: this. $router. push('www.yoursite.com/blog') .
Adding dynamic routes in VueUpdate the router/index. js file with the new route in the routes array. Remember to include the import for the Post component. Restart your app and head to localhost:8080/post/dynamic-routing in your browser.
Okay, I didn't know that a normal <a> tag works as my expectation if history mode is used, so I ended up doing this:
<a :href="$router.resolve({name: 'HelloWorld'}).href">link</a>
or maybe just:
<a href="/">link</a>
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