CODEWITHSUNDEEP
javascriptvue.jsvue-componentvue-router
Josh Batley
Josh Batley

Reputation: 190

this.$route in vue js component just returns undefined

I'm trying to get the params from the url into a method into in a vue component.

I've read that I'm meant to use this.$route but no matter what i do it returns undefined, I've seen a few different similar issues but their fixes haven't worked for me.

<template>
  {{ this.$route.query }}
</template>

<script>
  export default {
    name: 'cards',
    data: () => ({
      items: [
        {
          id: 1,
          title: '8 myths about mobile interfaces',
          link: 'https://medium.muz.li/8-myths-about-mobile-interfaces-390d9e2cee33',
          folder: 'medium',
          order: 1,
        },
        {
          id: 2,
          title: 'Asking your user’s gender, the new skeuomorphism, upside-down UIs and more',
          link: 'https://uxdesign.cc/asking-your-users-gender-the-new-skeuomorphism-upside-down-uis-and-more-e108ef888030',
          folder: 'medium',
          order: 2,
        },
      ],
    }),
    methods: {
      link: () => {
        console.log(this.$routes.query);
      },
    },
  };
</script>

I've used this.$route in the template and it works correctly and show it.

I'm not sure what I need to do to make it show the params.

I'm new to vue so might be doing the whole process wrong but basically the app will read the links and only show folder content, so if it the url is /cards?folder=medium it will only show data with the folder data. So if you know a better way just let me know!

Otherwise can you see why its not showing the route?

Here's my router vue file if it helps:

import Vue from 'vue';
import VueRouter from 'vue-router';

import cards from './cards/cards';

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: '/cards',
      name: 'cards',
      component: cards,
    },
  ],
  mode: 'history',
});

Upvotes: 9

Views: 30775

Answers (2)

Egor Stambakio
Egor Stambakio

Reputation: 18156

In order to access this you should NOT use arrow functions. Use regular functions instead:

methods: {
  links: function() {
    console.log(this.$route) // should work
  }
}

This is noted in Vue docs, for example here https://v2.vuejs.org/v2/api/#data bottom note.

Upvotes: 16

Eliran Malka
Eliran Malka

Reputation: 16263

you can use the object definition method shorthand (achieving the same result as in Egor Stambakio's answer, but with less characters, yay!).

methods: {
  links() {
    console.log(this.$route) // should also work
  }
}

Upvotes: 4

Related Questions