Vue $route 未定义答案

【问题标题】：Vue $route is not definedVue $route 未定义
【发布时间】：2017-06-11 03:55:56
【问题描述】：

我正在学习 Vue 路由器。而且我想在模板文件中不使用<router-link> 进行编程导航。我的路由器和视图：

 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” 按钮：

<button class="btn btn-sm btn-warning" @click="editVideo(video)">Edit</button>

方法：

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

它工作正常。但是，当我尝试使用 $route.params.id 在 VideoEdit 组件中获取 id 时，出现错误 Uncaught ReferenceError: $route is not defined

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

更新：顺便说一句，在 Vue 开发工具中我在组件内看到了 $route 实例

更新：

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

【问题讨论】：

您能否也将组件代码的那部分放在您要获取 param.id 的位置？
添加了代码。你可以检查一下。谢谢！
你可以试试 console.log(this.$route.params.id) 代替
是的，它可以工作，但我认为 $route 是全局变量......无论如何，非常感谢！

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案1】：

感谢Sandeep Rajoria

我们找到了解决方案，需要在组件内使用this.$route 除了$route

【讨论】：

在添加 this 后，我得到了 TypeError: Cannot read property '$route' of undefined
@GopalSharma 你是如何解决这个未定义的错误的？我也有同样的问题。
@noypee 不要使用 es6 风格的函数。
以防万一有人来到这里，您可以使用 es6 进行一些变通，只需将值分配给组件中的变量或组件创建或加载时的存储，更好的是，使用存储它在这种情况下使用 Vuex，那么您可以使用 es6 样式尽可能多地使用它。
@GopalSharma 看看我的回答

【解决方案2】：

对于添加this后出现错误的人

TypeError: Cannot read property '$route' of undefined

我们需要使用正则函数而不是ES6箭头函数

data: function() {
    return {
      usertype: this.$route.params.type
    };
  },

这对我有用。

【讨论】：

我在methods 中遇到了同样的问题。 ``` 方法： { forward: ({path}) => $router.push(path) } ``` 必须是 ``` 方法： { forward: function({ path }) { this.$router.push ('注册') } } ```

【解决方案3】：

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

【讨论】：

一些叙述会很好地解释你在这里做了什么。
vuejs 路由器指南并没有明确说明如果使用模块系统，您需要使用 Vue.use(VueRouter)。 router.vuejs.org/guide/#javascript

【解决方案4】：

如果您使用 vue v2 和 vue-router v2 则在 vue-cli 生成的样板方式中访问路由器，例如from component 是导入路由器（在 router/index.js 中导出）

<script>
  import Router from '../router';

然后在您的代码中，您可以使用如下路由器功能：

Router.push('/contacts'); // go to contacts page

【讨论】：

【解决方案5】：

对于那些尝试使用 es6 箭头函数的人，@Kishan Vaghela 的另一种替代方法是：

methods: {
        gotoRegister() {
            this.$router.push('register')
        }
    }

如Methods in ES6 objects: using arrow functions的第一个答案中所述

【讨论】：

【解决方案6】：

就我而言，这些以前的解决方案对我不起作用，所以我做了以下

<script> import Router from '../router';

然后在你的代码中你可以使用这个

this.$router.push('/contacts');

【讨论】：