我试图将url中的参数放入vue组件中的方法中.
我已经读到我应该用这个$但无论我做什么,它都返回未定义的结果,我见过一些不同的类似问题,但它们的修复方法对我不起作用.
<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>
我用过这个$在模板中布线,它可以正常工作并显示出来.
我不确定我需要做什么才能让它显示出我的魅力.
我是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',
});