Currently, I am delving into the realm of Vue router and aiming to achieve programmatic navigation without relying on <router-link> in my templates file. Here is a glimpse of my router and view setup:
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' })
}
})
The default behavior is to navigate to the 'allVideos' route, and within that component, there is a button with a method for redirecting to 'editVideo': button:
<button class="btn btn-sm btn-warning" @click="editVideo(video)">Edit</button>
method:
editVideo(video) {router.push({ name: 'editVideo', params: { id: video.id } })},
Everything seems to be working smoothly. However, upon attempting to retrieve the id inside the VideoEdit component using $route.params.id, an error occurs stating Uncaught ReferenceError: $route is not defined
This issue might be due to my current usage of the cdn version of Vue and VueRouter instead of npm. Any suggestions or solutions would be greatly appreciated! Thank you!
Update: By the way, within the Vue dev tool, I can observe the $route instance within the component.
Update:
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);
},
})