带有 webpack 的 Vue-router，无法访问 $route答案

【问题标题】：Vue-router with webpack, can't access $route带有 webpack 的 Vue-router，无法访问 $route
【发布时间】：2017-04-26 13:28:15
【问题描述】：

<template>
<div>
    {{$route.params}}
    <button v-on:click="test">dasda</button>
</div>
</template>

<script>
export default{
    methods: {
        test: () => {
        var test = this.$route;
           console.dir(test);
        }
    },
    created: () => {
    console.log(this.$route);
   }
}

</script>

我可以在绑定中访问$route，将显示正确的参数，但如果我尝试访问$route 对象，它是未定义的。我正在使用 Webpack 并使用 vuejs devtools 找到了 $route 对象，但我不知道如何访问它。如果我直接打印$route 对象，它也将是未定义的。

【问题讨论】：

标签： webpack vue.js vue-router

【解决方案1】：

不要在组件上使用箭头函数。它们必须绑定到组件的上下文。

相反，使用正确的方法：

export default {
    methods: {
        test () {
            var test = this.$route;

            console.dir(test);
        },
    },
    created () {
        console.log(this.$route);
    },
};

【讨论】：