Путь Vue $не определен

Я изучаю маршрутизатор 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, я получил сообщение об ошибке Uncaught ReferenceError: $route не определен

Может быть, потому, что я не использую npm на данный момент только для версии Vue и Vuerouter cdn. Любые решения? Спасибо!

Обновлено: btw в инструменте Vue dev Я вижу экземпляр $route внутри компонента

Обновлено:

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

Ответ 1

Благодаря Sandeep Rajoria

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

Ответ 2

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

Ответ 3

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

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

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

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

Ответ 4

В моем случае эти предыдущие решения не работают для меня, поэтому я сделал следующее

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

тогда в вашем коде вы можете использовать этот

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

Ответ 5

Для тех, кто получает ошибку после добавления this

TypeError: Cannot read property '$route' of undefined

Нам нужно использовать обычную функцию вместо функций стрелок ES6

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

Это сработало для меня.