Vue $ route nie jest zdefiniowana

Question

Uczę się routera Vue. I chcę uczynić programową nawigację (bez <router-link>). router i widok:

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

Więc domyślnie pcham do trasy 'AllVideos' i wewnątrz tego składnika mam przycisk i sposób przekierowanie do 'przycisk' editVideo” :

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

metoda:

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

Działa dobrze. Ale gdy próbuję uzyskać identyfikator wewnątrz komponentu VideoEdit wykorzystaniem $route.params.id mam błędzie Uncaught ReferenceError: $ trasa nie jest zdefiniowana

Może dlatego, że nie używam NPM na razie tylko w wersji cdn Vue i Vuerouter. Jakieś rozwiązania? Dzięki!

Aktualizacja: btw w narzędziu dev Vue widzę $ instancji trasach wewnątrz komponentu

Aktualizowane:

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

Dzięki Sandeep Rajoria

znaleźliśmy rozwiązanie, należy użyć this.$route oprócz $route wewnątrz komponentu

Answer 2

Jeśli używasz vue-v2 & vue-router v2, to w vue-cli generowany jest sposób podłączenia do routera np. ze składnikiem jest import routera (router/eksportowane w index.js)

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

następnie w kodzie można użyć funkcji routera jak:

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

Answer 3

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

Vue.use(Router) 

const router = ...