javascript - template - vue title attribute

Vue $ ruta no está definida

Question

Estoy aprendiendo enrutador Vue. Y quiero hacer una navegación programática (sin <router-link> ). Mi enrutador y vista:

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

Así que, de forma predeterminada, presiono la ruta ''allVideos'' y, dentro de ese componente, tengo un botón y un método para redirigir al botón '''' editVideo '':

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

método:

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

Funciona bien. Pero cuando intento obtener una identificación dentro de un componente VideoEdit usando $route.params.id , recibí el error Uncught ReferenceError: $ route no está definido

Tal vez sea porque no estoy usando npm por ahora solo una versión cdn de Vue y Vuerouter. ¿Alguna solución? ¡Gracias!

Actualizado: por cierto en la herramienta de desarrollo de Vue veo una instancia de $ route dentro del componente

Actualizado:

    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

En mi caso, estas soluciones anteriores no me funcionan, así que hice lo siguiente

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

entonces en tu código puedes usar este

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

Answer 2

Gracias a Sandeep Rajoria

encontramos una solución, necesitamos usar this.$route excepto $route dentro de un componente

Answer 3

Si está utilizando vue v2 y vue-router v2, en vue-cli la manera de acceder al enrutador, por ejemplo, desde el componente es importar el enrutador (exportado en router / index.js)

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

Luego en tu código puedes usar funciones de enrutador como:

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

Answer 4

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