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 https://stackoverflow.com/questions/47148363/when-to-use-vm-or-this-in-vue-js/47148828#47148828 — Jakob, Jun 06 '19 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, Jun 06 '19 at 22:18
Add the whole function over here in which you are doing push in router. — Riddhi, Jun 07 '19 at 06:23
export default new Router({ mode: 'history', routes: [ { path: '/login', name: 'Login', component: LoginView }, — Ângelo Rigo, Jun 07 '19 at 12:06
Login.vue and NaviBar.vue are both at the components directory — Ângelo Rigo, Jun 07 '19 at 12:06
Hi, @Riddhi i edit the post showing my steps to try to solve this problem. — Ângelo Rigo, Jun 07 '19 at 12:43

score 2 · Answer 1 · answered Jun 07 '19 at 13:36

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 07 '19 at 13:36

Riddhi

2,174
1
9
17

It will be : const router = new Router({ mode: 'history', routes: [ { path: '/login', name: 'Login', component: LoginView } }) export default router ?? – Ângelo Rigo Jun 07 '19 at 14:54
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. – Ângelo Rigo Jun 07 '19 at 15:26

How to use router push inside a VueJs component?

1 Answers1