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

Question

我正在尝试将url中的参数转换为vue组件中的方法.

我已经读过,我打算使用这个.$ route但无论我做什么都返回undefined,我看到了一些不同的类似问题,但是他们的修复对我没用.

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

我在模板中使用了这个.$ route,它可以正常工作并显示出来.

我不确定我需要做什么来让它显示参数.

我是vue的新手,所以可能整个过程都是错误的,但基本上应用程序会读取链接并只显示文件夹内容,所以如果它的URL是/ cards？folder = medium,它只会显示带有文件夹数据的数据.所以,如果你知道更好的方式,请告诉我!

否则,你能看出为什么它没有显示路线？

这是我的路由器vue文件,如果它有帮助:

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

为了访问this你不应该使用箭头功能.使用常规功能:

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

这在Vue docs中有说明,例如https://vuejs.org/v2/api/#data bottom note.