Vue
How to Implement a Back Button in Vue.js using VueRouter
Thank you for your continued support.
This article contains advertisements that help fund our operations.
Table Of Contents
オススメ本
This article summarizes how to implement a back button using VueRouter in Vue
Setting Up a Back Button with VueRouter
Correct example
<a @click="$router.back()">Back</a>
Incorrect example
<router-link :to="$router.back">Back</route-link>
With the button below, the back action is triggered when the page is loaded, which navigates back automatically. So, the correct example seems better, right?
That's all for now.
This feature behaves the same as the browser's back button
If you want to go back only one level, like with breadcrumbs, it's best to specify the routing destination, like this:
<router-link :to="{ name: 'previous-name'}">Back</router-link>
I think this approach is better.
That's it!
Recent Articles
Please Provide Feedback
We would appreciate your feedback on this article. Feel free to leave a comment on any relevant YouTube video or reach out through the contact form. Thank you!