I am attempting to retrieve the parameters from the URL and pass them into a method within a Vue component.
Despite following advice to use this.$route, I am consistently getting an 'undefined' response. I have tried various solutions suggested by others with similar issues, but none seem to work 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>
Using this.$route in the template displays correct information, but I am unsure how to display the parameters.
My understanding of Vue is still developing, and there may be a better approach to achieving my goal of displaying folder content based on the URL parameter. Any suggestions are welcome!
If you can identify why the route is not displaying, please let me know. Additionally, here is my Vue router file for reference:
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',
});