vue.js: невозможно получить доступ к параметрам маршрутизатора из вычисляемого свойства

Question

Я пытаюсь передать строковый параметр, используя ссылку.но кажется, что свойство computed or functions не может вернуть значение параметра.Весь компонент прекращает рендеринг, когда я использую свойство computed.

Если я непосредственно добавлю {{ $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

Вы сталкиваетесь с этим 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

Answer 2

Попробуйте с

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