Question

我正在尝试使用链接传递字符串参数。但是看来计算或方法属性无法返回参数值。当我使用计算属性时，整个组件将停止呈现。

如果我直接将{{ $route.params.**** }}放在模板上，一切正常。但这不是我想要的方式。

<template>
  <div class="container my-5 py-5">
    <div class="row">{{ category }}</div>

    <!-- <div class="row">{{ $route.params.category }}</div> -->
  </div>
</template>
<script>
export default {
  name: "shops",
  data() {
    return {};
  },
  computed: {
    category: () => {
      return this.$route.params.category;
    }
  }
};
</script>

来自router.js文件：

   {
      path: "/:category",
      name: "category",
      props: true,
      component: () => import("./views/Shops.vue")
    },

我在控制台中没有收到任何错误消息。

Answer 1

尝试

category(){
  return this.$route.params.category;
}

或

category: function() {
  return this.$route.params.category;
}

this在箭头功能中不同于在普通功能中：https://medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26

Answer 2

您正面临error，因为箭头功能不会将this绑定到您要为其定义vue属性的computed实例。如果要使用methods函数定义arrow，也会发生同样的情况。

请勿使用箭头功能定义方法/计算属性，this将不起作用。

只需更换

        category: () => {
            return this.$route.params.category;
        }

使用：

        category() {
            return this.$route.params.category;
        }

引荐-https://vuejs.org/v2/guide/instance.html#Data-and-Methods

vue.js：无法从计算的属性访问路由器参数

2 个答案: