A rota Vue $ não está definida
Estou aprendendo o roteador Vue. E eu quero fazer a navegação programática (sem<router-link>
) Meu roteador e visualização:
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' })
}
})
Então, por padrão, eu envio para a rota 'allVideos' e, dentro desse componente, tenho um botão e um método para redirecionar para o botão '' 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 bem. Mas quando tento obter a identificação dentro de um componente VideoEdit usando$route.params.id
Eu tenho erroNão detectado ReferenceError: $ route não está definido
Talvez seja porque eu não estou usando o npm por enquanto apenas uma versão em CDN do Vue e Vuerouter. Alguma solução? Obrigado!
Atualizada: btw na ferramenta dev Vue vejo $ route instance dentro do componente
Atualizada:
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);
},
})