ホーム > Vue > How to Implement a Back Button in Vue.js using VueRouter
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.

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

Troubleshooting Data Not Updating in Nuxt.js Deployment

⇨How to Use Computed Properties in Vue

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!