vue js 组件中的 this.$route 只返回 undefined

Question

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',
});

Answer 1

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.

Answer 2

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