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

Answer 1

Thanks to Sandeep Rajoria

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

Answer 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.