Vue3 using script setup, how to access this.$router.push()

Question

I am new to Vue3 and am struggling with some examples. I have a simple login component that should redirect to another page but isn't.

Here is my template:

And here is my script:

The problem is that the this.$router is not available, because this is undefined. All the examples that I can find use this coding pattern, but the this variable is undefined in the script setup coding pattern as far as I can tell. What is the alternative?

Thanks.

useRouter() router.push() router.vuejs.org/guide/advanced/… — Enfield Li
– Enfield Li, Commented Apr 14, 2022 at 1:44
Side note: please avoid posting images of code since none of us can copy, paste and try to run or experiment with an image. Always if possible post code and error messages as code-formatted text. — Hovercraft Full Of Eels
– Hovercraft Full Of Eels, Commented Apr 14, 2022 at 2:00

kissu · Accepted Answer · 2022-10-21 08:59:24Z

30

First off import the useRouter composable from vue-router, then use router to access the method.

import { useRouter } from 'vue-router';
const router = useRouter()

function login() { 
  router.push({ path: 'your-path-here' })
}

This is the equivalent of Options API's this.$router.push.

edited Oct 21, 2022 at 8:59

kissu

47.3k16 gold badges94 silver badges197 bronze badges

answered Apr 15, 2022 at 12:45

mateocodeo

3613 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fudo Over a year ago

Working on a NuxtJs app, facing the same problem and tried this solution but got the following error in console: [Vue warn]: inject() can only be used inside setup() or functional components.

Collectives™ on Stack Overflow

Vue3 using script setup, how to access this.$router.push()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related