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

Question

<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 对象，它也将是未定义的。

Answer 1

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

相反，使用正确的方法：

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

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

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

Vue-router with webpack, can't access $route

webpack

vue.js

vue-router