vue.js: can't access to router parameters from computed property

Question

I'm trying to pass a string parameter using the link. but it seems that computed or methods property cannot return the parameter value. The whole component stops rendering when I use computed property.

If I directly put {{ $route.params.**** }} on the template, everything works fine. But that's not the way I want.

<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>

from router.js file:

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

I did't get any error message in the console.

Answer 1

You are facing this error because an arrow function wouldn't bind this to the vue instance for which you are defining the computed property. The same would happen if you were to define methods using an arrow function.

Don't use arrow functions to define methods/computed properties, this will not work.

Just replace

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

With:

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

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

Answer 2

Try with

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

or

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

this is not the same in arrow functions than in plain functions: https://medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26