How can I get parameter from server when start vue page? - node.js

Question

Hello I need to know how can I solve this issue.
What I want to know is how can I open a page with parameters from data.
Here is flow What I want to make.
several person receives email. there is a button to link to a page with their id.
When they push the button, server identifies them and send their name from database.
redirect them to main page. with their name data.
main page(vue) shows their name like “welcome home. Mr Smith”
I’m stuck between step 3 and 4. I’m sending their name data as query.
But don’t know how to receive them.
I thought it can be used as props. but it only shows ‘undefined’
here is my node js code.
res.redirect(url.format({
pathname:"/",
query: {
"name": rows[0].name,
"familyname": rows[0].familyname,
"gender":rows[0].gender
}
}));
and this is vue router part. (router.js)
routes: [
{
path: '',
props: true,
component: () => import('./layouts/main/Main.vue'),
children: [ ... ]
}]
and I’m making my main.vue code like this.
export default {
props: ['name','familyname','gender'],
methods: {
showprops() {
alert(this.$props.name);
}
},
created() {
this.showprops();
}
Current result is undefined when alert(this.$props.name) is called.
How can I solve this issue?
Thank you in advance.

Answer 1

$route.query
Looks like you are including your parameters as query parameter, e.g. /?name=xxx&familyname=xxx&gender=xxx . To get queryparameters from vue route you have to use this.$route.query .
$route.props
To have props like this.$route.props , this would require a url like /user/12345/bob and a vue router setup like
routes: [
{ path: '/user/:id/:name', component: User, props: true }
]
Converting query parameters to vue router props
In the official vue router docs you'll find a very nice example on how to use Function Mode to convert query parameters to props ( https://router.vuejs.org/guide/essentials/passing-props.html#function-mode ) .
const router = new VueRouter({
routes: [
{ path: '/search',
component: SearchUser,
props: (route) => ({ query: route.query.q })
}
]
})
From the example above the URL /search?q=vue would pass {query: 'vue'} as props to the SearchUser component.