How to use router push inside a VueJs component?

Question

I have a navbar component, I need to redirect to the login component inside a logout method declared at navbar.

I tried: this.$router.push({name:'MyLogin'});

But I see the error:

vue-router.esm.js?8c4f:1897 TypeError: Cannot read property '$router' of undefined
at eval (main.js?56d7:68)

How can I use router push inside a component?

Or how can I inside this component make access to the router.

EDIT :

At the file: /src/router.js I have the Login route:

export default new Router({
    mode: 'history',
    routes: [
    {
        path: '/login',
        name: 'Login',
        component: LoginView
    },

And at the file: /src/components/Navibar.vue I have the doLogout method:

methods: {
    doLogout(){ 
    this.$router.push({name:'Login'}); 
}

Being new to Vue js I tried this:

doLogout(){
   const router = new router({
    routes: [
              { 
                path: '/login', 
                name: 'Login', 
                component: LoginView 
              }               
        ]
  })
 this.$router.push({name:'Login'});

}

I see the error message:

doLogout catch ReferenceError: LoginView is not defined at eval (VM2993 NaviBar.vue:324)

So I tried to add the component:

Vue.component('LoginView', require('Login.vue'));

Which gives me the error:

Module not found: Error: Can't resolve 'Login.vue'

Maybe I am doing the wrong steps?

Which is the correct way to enable this.$router.push() inside one component redirecting to another component?

maybe this could help stackoverflow.com/questions/47148363/… — Jakob
– Jakob, Commented Jun 6, 2019 at 20:46
Something is wrong with your component since this is undefined. We can't tell from that one line. What does the rest of the component look like? — Dan
– Dan, Commented Jun 6, 2019 at 22:18
Add the whole function over here in which you are doing push in router. — Riddhi
– Riddhi, Commented Jun 7, 2019 at 6:23
export default new Router({ mode: 'history', routes: [ { path: '/login', name: 'Login', component: LoginView }, — Ângelo Rigo
– Ângelo Rigo, Commented Jun 7, 2019 at 12:06

Riddhi · Accepted Answer · 2019-06-07 13:36:03Z

2

Try declaring as below :

At the file: /src/router.js

const router = new Router({
    mode: 'history',
    routes: [
    {
        path: '/login',
        name: 'Login',
        component: LoginView
    },
export default router

The router variable declared is accessible over all vue components.

Hence at the file: /src/components/Navibar.vue doLogout method :

methods: {
    doLogout(){ 
    this.$router.push({name:'Login'}); 
}

answered Jun 7, 2019 at 13:36

Riddhi

2,2541 gold badge11 silver badges17 bronze badges

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

2 Comments

Ângelo Rigo Over a year ago

It will be : const router = new Router({ mode: 'history', routes: [ { path: '/login', name: 'Login', component: LoginView } }) export default router ??

Ângelo Rigo Over a year ago

thank´s @Riddhi, now debuging i see the entire router object, this is at the navbar component, just don´t know why it stays on the same page, it does not redirect.

Collectives™ on Stack Overflow

How to use router push inside a VueJs component?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related