Vue $route is not defined

Question

I'm learning Vue router. And I want to made programmatic navigation without using <router-link> in templates file. My router and view:

 router = new VueRouter({
        routes: [
            {path : '/videos',  name: 'allVideos', component: Videos },
            {path : '/videos/:id/edit', name: 'editVideo', component: VideoEdit },
        ]
    });

    new Vue({
        el: "#app",
        router,
        created: function(){
            if(!localStorage.hasOwnProperty('auth_token')) {
                window.location.replace('/account/login');
            }

            router.push({ name: 'allVideos' })
        }
    })

So by default I push to 'allVideos' route and inside that component I have a button and method for redirecting to ''editVideo' button:

<button class="btn btn-sm btn-warning" @click="editVideo(video)">Edit</button>

method:

editVideo(video) {router.push({ name: 'editVideo', params: { id: video.id } })},

It works fine. But when I try to get id inside a VideoEdit component using $route.params.id I got error Uncaught ReferenceError: $route is not defined

Maybe it's because I'm not using npm for now just a cdn version of Vue and Vuerouter. Any solutions? Thanks!

Updated: btw in Vue dev tool I see $route instance inside the component

Updated:

var VideoEdit = Vue.component('VideoEdit', {
          template: ` <div class="panel-heading">
                        <h3 class="panel-title">Edit {{vieo.name}}</h3>
                    </div>`,
                data() {
                    return {
                        error: '',
                        video: {},
                }
            },        
            created: function () {
                  console.log($route.params.id);
            },
  })

Could you also put that part of the component code where you are fetching the param.id? — Sandeep Rajoria, Jan 25 '17 at 20:19
yeah it works, but I thought $route is global variable... Anyway thank you very much! — Bogdan Dubyk, Jan 25 '17 at 20:32

score 52 · Accepted Answer · edited May 23 '17 at 12:10

52

Thanks to Sandeep Rajoria

we found solution, need to use this.$route except $route inside a component

edited May 23 '17 at 12:10

Community

1
1

answered Jan 25 '17 at 20:38

Bogdan Dubyk

2,860
3
21
39

8

after adding `this` i am getting `TypeError: Cannot read property '$route' of undefined` – Gopal Sharma Apr 14 '17 at 12:41
@GopalSharma How did you resolve this undefined error? I have the same problem. – codely May 11 '17 at 18:18
5

@noypee don't use es6 style functions. – Gopal Sharma May 17 '17 at 03:12
1

Just in case anyone arrives here, you can use es6 with a little workaround, just assign the value to a variable in the component or to the store on component creation or load, even better, store it using Vuex in that case, then you can use it as much as you need with es6 style. – sab Nov 16 '18 at 11:19
1

@GopalSharma See my answer – Kishan Vaghela Jun 27 '19 at 09:38
for my part is was this.$router.push not this.$route – Dannick Bédard Jan 10 '21 at 15:30

Kishan Vaghela · Answer 2 · 2019-06-28T10:35:02.280

10

For those who getting the error after adding this

TypeError: Cannot read property '$route' of undefined

We need to use a regular function instead of ES6 arrow functions

data: function() {
    return {
      usertype: this.$route.params.type
    };
  },

This worked for me.

edited Jun 28 '19 at 10:35

answered Jun 27 '19 at 09:38

Kishan Vaghela

7,008
3
36
63

I had the same issue inside of `methods`. ``` methods: { forward: ({path}) => $router.push(path) } ``` needed to be ``` methods: { forward: function({ path }) { this.$router.push('register') } } ``` – Seth McClaine Oct 30 '19 at 15:24

Tran Hoang Hiep · Answer 3 · 2018-05-19T04:39:23.190

7

import Vue from 'vue'
import Router from 'vue-router';

Vue.use(Router)

const router = new VueRouter({
    routes: [
        {path : '/videos',  name: 'allVideos', component: Videos },
        {path : '/videos/:id/edit', name: 'editVideo', component: VideoEdit },
    ]
});

new Vue({
    el: "#app",
    router,
    created: function(){
        if(!localStorage.hasOwnProperty('auth_token')) {
            window.location.replace('/account/login');
        }

        this.$router.push({ name: 'allVideos' });
    }
})

edited May 19 '18 at 04:39

answered Apr 25 '17 at 15:06

Tran Hoang Hiep

514
5
11

12

Some narrative would be nice to explain what you did here. – Mad Physicist Apr 25 '17 at 15:28
The vuejs router Guide doesn't make it very clear that you need to use Vue.use(VueRouter) if using a module system. https://router.vuejs.org/guide/#javascript – Michael Mar 04 '20 at 22:47

score 1 · Answer 4 · answered Apr 21 '17 at 14:32

If you're using vue v2 & vue-router v2 then in vue-cli generated boilerplate way to access router e.g. from component is to import router (exported in router/index.js)

<script>
  import Router from '../router';

then in your code you can use router functions like:

Router.push('/contacts'); // go to contacts page

score 1 · Answer 5 · answered Oct 30 '19 at 17:26

For those attempting to use es6 arrow functions, another alternative to @Kishan Vaghela is:

methods: {
        gotoRegister() {
            this.$router.push('register')
        }
    }

as explained in the first answer of Methods in ES6 objects: using arrow functions

score -1 · Answer 6 · answered Aug 28 '18 at 15:56

-1

In my case these previous solutions don't work for me so i did the following

<script> import Router from '../router';

then in your code you can use this one

this.$router.push('/contacts');

answered Aug 28 '18 at 15:56

Houndjetode Noukpo Herve

141
2
11

Vue $route is not defined

6 Answers6

Linked