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);
            },
  })

Solution 1

Thanks to Sandeep Rajoria

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

Solution 2

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.

Solution 3

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' });
    }
})

Solution 4

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

Solution 5

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

View more solutions