I have defined a router-link
<router-link :to="{ path: linkTo + '/' + item.name, params: { id: item.id } }" >{{item.name}}</router-link>
But when I inspect the router-link, the params object is always empty.
What i'm doing wrong? If I just output the id with {{item.id}} i get the number...
This is my route
{ path: '/category/:name', component: Category, props: true, name: 'category', meta: { auth: true } },
gregor
The dynamic segment specified in your route is "name", not the "id". This means your $route.params object doesn't have an "id" property and you can't access it with props in your child component.
You have either to change path in your route to path: '/category/:id' or change your router-link params to params: { name: item.id }. Don't forget to add props: ['id'] (or props: ['name']) in your child component.
Related
I'm new with Vue 3 router things, so really need help with it.
I'm trying to pass prop through the router link.
So, I have a component Post, where a prop post is an Object.
Post.vue
export default defineComponent({
name: 'Post',
props: {
post: {
type: Object as PropType<Post>,
required: true,
},
},
I have a component EditPostForm, where should be absolutely the same object as in the Post component.
EditPostForm.vue
export default defineComponent({
name: 'EditPostForm',
props: {
post: {
type: Object as PropType<Post>,
required: true,
},
},
And that's the router link in the Post component.
Post.vue
<router-link
class="..."
:to="{
path: '/post/edit',
props: post,
query: { post: post.id },
}"
>Edit
</router-link>
router/index.ts
{
path: '/post/edit',
name: 'Edit Post',
component: EditPostForm,
props: Object as PropType<Post>,
},
And an error I'm getting
Error
[Vue warn]: Missing required prop: "post"
at <EditPostForm fullPath="/post/edit?post=3" hash="" query= {post: "3"} ... >
at <RouterView>
at <App>
As far as I know, you cannot pass props directly using <router-link> , but you can set vue-router to pass the route params as props to the component:
{
path: '/post/edit/:prop1/:prop2/:prop3', // set your desired props as params in the url
name: 'Edit Post',
component: EditPostForm,
props: true, // set props to true, this will pass the url params as props
},
Then, in your template, you can specify params property within :to:
<router-link
class="..."
:to="{
path: '/post/edit',
params: post, // <-- changed 'props' to 'params'
query: { post: post.id },
}"
>Edit
</router-link>
Passing props can also be done via Object mode or Function mode, read more about them in the docs.
Object mode wouldn't be helpful, since that's mostly used for static props, but maybe you can use the Function mode if what I have provided above doesn't work for your use-case.
I have created a
<router-link :to="{ name: 'casa', params: {casa: item ,codCasa:item.cod_Casa} }">{{ item.cod_casa }}</router-link>
but now a have a problem with path. Cannot have a clear url.
item
is an object and then url is http://localhost:8080/casa/%5Bobject%20Object%5D
In routes i have
{
path: "/casa/:casa",
name: "casa",
component: () =>
import(/* webpackChunkName: "about" */ "./components/Casa/Casa.vue"),
props: true
},
If i use path: "/casa/:codCasa" it says codCasa is not defined.
Thanks in advance.
You should pass in your path just codCasa and get the object inside your component.
Vue Roter allows props, so we can do something like:
{
path: "/casa/:casa",
name: "casa",
component: () =>
import(/* webpackChunkName: "about" */ "./components/Casa/Casa.vue"),
props: { casa: { id: 1, name: 'Casa 1' } }
},
Where casa is defined as prop inside the component
But it looks like the object casa is dynamic and thats why I recommend the first way, using just the ID in the path and waiting a prop called codCasa in your component. Pay attention about the type used to the prop.
If you really need to pass the entire object and don't want to get it from backend inside the component, think about using just a child component without a new route.
I am passing params to a named route from a component:
<v-list-tile
:key="team.logo_url"
:to="{name: 'team', params: {
id: team.id,
name: team.name
}}"
avatar
>
The route is sett up likes so:
{
path: "/team",
name: "team",
component: TeamInfo,
props: {
id: true,
name: true
}
}
But the component does not render the props when referenced:
<template>
<v-container>
<p>{{ id }}</p>
</v-container>
</template>
<script>
import TeamService from '#/services/TeamService';
export default {
props: ['id', 'name'],
data: () => ({
players: [],
games: []
}),
mounted() {
console.log(this.id);
}
}
</script>
The log in the mounted method returns undefined.
However when I look in Vue dev-tools at the TeamInfo component I can see that both props are undefined but the params are populated.
I would like to be able to use the props in the component and also populate the URL with the team ID.
You have to use the boolean mode for to pass the params to both the URL and props. You also have to define the parameter inside the path to be able to access it. Here is an example that shows how to use it.
{
name: "team",
path: "/team/:id",
component: TeamInfo,
props: true,
}
https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode
I have a route:
{ path: "reporting/report/result", name: "reportResult", component: ResultTable, props: true }
And a router-link:
<router-link :to="{ name: 'reportResult', params: {reportId: 21, tableData: 'data'}}" target="_blank">{{ report.reportId }}</router-link>
But props are not passed to the child component. If use router-link without target="_blank" all works fine. Probably there is another way to open link in a new tab and pass props to it?
The router link params options doesn't pass your object in query, if you want pass your object, you must use the query args.
According to vue router docs
// named route
router.push({ name: 'user', params: { userId: 123 }})
// with query, resulting in /reportResult?reportId=21&tableData=data
router.push({ path: 'reportResult', query: {reportId: 21, tableData: 'data'}})
In you'r page, you access to your query with :
this.$route.query.reportId (or this.$route.params.reportId, I don't remember)
I am trying to build a spa using vuejs in which I have a list of users now when I click a user it should route to a new page with user details of the particular user how to params the user id in router-link
You can pass params in router link using
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
Here "name" key parameter defines the name of the route and "params" key defines the parameters you need to send with that route.
If you need to use Route Path instead of Route name, You can use.
<router-link :to="{ path: 'home', params: { userId: 123 }}">Home</router-link>
Reference
Looks like params: {...} doesn't work on non-named routes so to get that working I had to make my links like this:
<router-link :to="'/view-customer/' + customer.ID">
With ES6 template literals:
<router-link :to="`/books/${book.id}`"></router-link>
solution for non-named routes:
<router-link :to="{ path: 'register', query: { plan: 'private' }}"
>Register</router-link>
resulting in /register?plan=private
source: Documentation
I'm using this and it's works fine:
<router-link :to="'/home?id=' + customer.ID">
Also use the following code to retrieve it:
this.$route.query.id
router/index.js:
import VueRouter from 'vue-router'
import List from '../views/List.vue'
import Item from '../views/Item.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'List',
component: List
},
{
path: '/item/:id',
name: 'Item',
component: Item
}
}
]
List.vue:
<router-link :to="{ name: 'Item', params: { id: data.item.id }}">{{ data.item.id }}</router-link>
Item.vue:
<template>
id: {{ $route.params.id }}
</template>
<script>
return this.$route.params.id
</script>
Routes declaration
{path: '/insta-view/:name', name: 'instaFrontView', component: instaFrontViewComponent},
Bind parameter using the path
<router-link :to="'insta-view/'+ loginUserName" class="nav-link"> View</router-link>
Bind parameter using the name
<router-link :to="{ name: 'instaFrontView', params: { name: loginUserName }}" class="nav-link"> View</router-link>
export default {
data() {
return {
loginUserName: 'test',
}
},
}
Retrieve parameter in code
this.$route.params.name