Vue $route is not defined

14 浏览
0 Comments

Vue $route is not defined

我正在学习Vue路由器，我想在模板文件中不使用实现编程式导航。

我的路由器和视图：

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'的方法。

按钮：

方法：

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

它工作得很好。但是当我尝试在VideoEdit组件中使用$route.params.id时，我得到错误Uncaught ReferenceError: $route is not defined。

也许是因为我现在没有使用npm，只是使用了Vue和Vue Router的cdn版本。有什么解决办法吗？谢谢！

更新：顺便说一下，在Vue开发工具中，我可以看到组件内的$route实例。

更新：

var VideoEdit = Vue.component('VideoEdit', {
     template: ` 
         
编辑{{vieo.name}}

     `,
     data() {
         return {
             error: '',
             video: {},
         }
     },        
     created: function () {
         console.log($route.params.id);
     },
})

0