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