Vue $ route не определен

Question

Я изучаю маршрутизатор Vue. И я хочу сделать программную навигацию (без <router-link>). Мой маршрутизатор и вид:

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

Так по умолчанию я нажимаю на маршрут «AllVideos» и в этом компоненте у меня есть кнопка и метод перенаправления на « кнопку» editVideo»:

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

метод:

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

Он отлично работает. Но когда я пытаюсь получить идентификатор внутри компонента VideoEdit с помощью $route.params.id я получил ошибку неперехваченного ReferenceError: $ маршрутов не определен

Может быть, это потому, что я не использую НПЕ теперь только версию ТПСА из Vue и Vuerouter. Любые решения? Благодаря!

Обновлено: кстати в Вью инструмента Dev я вижу $ экземпляр маршрута внутри компонента

Обновлено:

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

Благодаря Sandeep Rajoria

мы нашли решение, нужно использовать this.$route кроме $route внутри компонента

Answer 2

Если вы используете vue v2 & vue-router v2, то в vue-cli генерируется шаблонный способ доступа к маршрутизатору, например. от компонента импорта маршрутизатор (вывозимых в маршрутизатор/index.js)

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

затем в своем коде вы можете использовать функции маршрутизатора, как:

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

Answer 3

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

Vue.use(Router) 

const router = ...