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

1 个答案: