Vue $ route未定义

我正在学习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'按钮:

Edit

方法:

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

它工作正常.但是当我尝试在VideoEdit组件中获取id时,我得到$route.params.id了错误Uncaught ReferenceError:$ route未定义

也许是因为我现在不使用npm只是Vue和Vuerouter的cdn版本.有解决方案吗 谢谢!

更新:在Vue开发工具中使用btw我在组件中看到了$ route实例

更新:

    var VideoEdit = Vue.component('VideoEdit', {
          template: ` 

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

Bogdan Duby.. 37

感谢Sandeep Rajoria

我们发现解决方案,需要使用this.$route不同的$route组件内

1> Bogdan Duby..：

---

感谢Sandeep Rajoria

我们发现解决方案,需要使用this.$route不同的$route组件内

---

添加`this`之后我得到了`TypeError:无法读取未定义`的属性'$ route'

---

@noypee不使用es6样式函数.

2> Tran Hoang H..：

---

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

---

一些叙述可以很好地解释您在这里所做的事情。