Ad
How I Can Get Router Params In Apollo ? [VUE3]
here is my component script on VueJS. I want to know how to get router params in my apollo component to search item whith these params. The idea is to replace 953 by the id of the page. If you have any questions, ask me ! I'm using createRouter, createWebHashHistory from vue-router and VueJS 4.
Thanks for help.
<script>
import gql from "graphql-tag";
// import { useRouter } from "vue-router";
import TemplatePresentationPage from "./TemplatePresentationPage.vue";
export default {
name: "PresentationPage",
apollo: {
entry: gql`
query entry {
entry(id: 953) {
id
title
}
}
`,
},
components: { TemplatePresentationPage },
setup() {
return {};
},
};
</script>
Ad
Answer
If your routes looked like this
const routes = [{ path: '/user/:id', component: User }]
then to get that id param on your component you just do as below
const User = {
// make sure to add a prop named exactly like the route param
props: ['id'],
template: '<div>User {{ $route.params.id }}</div>'
}
and this works on your template as well
<template>
<div>User {{ $route.params.id }}</div>
</template>
But as for your case, it seems like you want to use it on your setup()
function.
The way you access it is as below
import { useRoute } from 'vue-router';
export default {
setup(){
const route = useRoute();
//console.log(route.params.parameterName)
}
}
Ad
source: stackoverflow.com
Related Questions
- → should I choose reactjs+f7 or f7+vue.js?
- → Get the calling element with vue.js
- → Vue.js - Binding radio elements of same name to array
- → Get data from DB based on selected values. Vue.js + laravel
- → Vuejs IF statement
- → VueJS set Input field data
- → How do I use vue-resource v-links inside a vueify component?
- → Export more than one variable in ES6?
- → How create a todo list with octobercms?
- → Using vue.js in Shopify liquid templates
- → Apply a discount using VueJS and Laravel
- → Laravel 5.2 CORS, GET not working with preflight OPTIONS
- → Vue @click doesn't work on an anchor tag with href present
Ad