vue.js: 계산된 속성에서 라우터 매개 변수에 액세스할 수 없음

vue.js: 계산된 속성에서 라우터 매개 변수에 액세스할 수 없음

링크를 사용하여 문자열 매개 변수를 전달하려고 하는데 계산된 속성이나 메서드 속성이 매개 변수 값을 반환하지 못하는 것 같아.계산된 속성을 사용하면 전체 구성요소가 렌더링을 중지한다.

만약 내가 직접 말한다면{{ $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")
    },

콘솔에서 오류 메시지를 받지 못했다.

너는 이것을 마주하고 있다.error왜냐하면 화살표 기능이 바인딩되지 않기 때문이다.this에게vue정의하려는 인스턴스(instance)computed재산만약 당신이 정의한다면 같은 일이 일어날 것이다.methodsa를 사용하여.arrow기능을 하다

화살표 함수를 사용하여 메서드/계산된 속성을 정의하지 마십시오.this효과가 없을 것이다.

교체만 하십시오.

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

포함:

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

참조 - https://vuejs.org/v2/guide/instance.html#Data-and-Methods

시도하다

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

참조URL: https://stackoverflow.com/questions/56303878/vue-js-cant-access-to-router-parameters-from-computed-property