I want to pass an object as a prop to another page via a router-link in Ionic-Vue.
Nothing appears to be being passed in when I click on the link that I've created.
This is the link that I'm using.
<router-link :to="{ name: 'movieInfo', params: { movieInfo: movie }}"><h2>{{movie.Name}}</h2></router-link>
Index.js
{
name: 'movieInfo',
path: 'movieinfo',
component: () => import('#/views/MovieInfoPage.vue'),
props: true
},
Props field within the movieInfo page
props:{
movieInfo:{
required: true
}
},
Is there something I'm doing wrong or should I handle this differently.
You have to declare in your routes that this route take props and you have to declare your path like this
path: '/movieinfo/:movieInfo',
movieInfo become a dynamic data and then you can pass it via router-link
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 researching whether a vue router is the best approach for the following scenario:
I have a page containing 'n' number of divs. Each of the divs have different content inside them. When a user clicks on a button in the div, I would like the div to open in a separate browser window (including its contents).
Can a route name/component be created on the fly to route to? Since I have 'n' number of divs, that are created dynamically, I cannot hard-code name/components for each one
<router-link :to="{ name: 'fooRoute'}" target="_blank">
Link Text
</router-link>
I want to avoid the same component instance being used (via route with params) since I may want multiple divs to be open at the same time (each one in their own browser window)
If the link is opening in a separate window, it makes no sense to use a <router-link> component as the application will load from scratch in any case. You can use an anchor element instead and generate the href property dynamically for each div.
To answer your questions:
A route name cannot be created dynamically since all routes must be defined at the beginning, when the app (along with router) is being initialized. That said, you can have a dynamic route and then dynamically generate different paths that will be matched by that route.
There is no way for the same component instance to be reused if it's running in a separate browser window/tab.
It is possible to create dynamic router name.
profileList.vue
<template>
<main>
<b-container>
<b-card
v-for="username in ['a', 'b']"
:key="username"
>
<b-link :to="{ name: profileType + 'Profile', params: { [profileType + 'name']: username }}">Details</b-link>
</b-container>
</main>
</template>
<script>
export default {
name: 'profileList',
data () {
return {
profileType: ''
}
},
watch: {
// Call again the method if the route changes.
'$route': function () {
this.whatPageLoaded()
}
},
created () {
this.whatPageLoaded()
},
methods: {
whatPageLoaded () {
this.profileType = this.$route.path // /user or /place
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>
b-container, b-card, b-link are taken from bootstrap-vue, so you can freely change it.
router.js
const router = new Router({
mode: 'hash',
base: process.env.BASE_URL,
linkExactActiveClass: 'active',
routes: [
// USERS
{
path: '/user/:username',
name: userProfile,
component: userProfile
},
{
path: '/user',
name: 'userList',
component: profileList
},
// PLACES
{
path: '/place/:placename',
name: placeProfile,
component: placeProfile
},
{
path: '/place',
name: 'placeList',
component: ProfileList
}
]
})
I have vue router config with routes like this:
{
path: '/:language/:url/filter/',
name: 'search-filter',
component: SearchFilter,
meta: { removeScroll: true }
}
{
path: '/:language/:url/map/',
name: 'search-map',
component: SearchMap,
meta: { removeScroll: true }
}
Whenever I place a router-link with that component like so:
<router-link :to="{ name: 'search-map' }">
<svg-inline name="beacon-circle"></svg-inline>
{{ trans.hotel.show_map }}
</router-link>
It generates a full route to the named route of search-map. Now I have not manually passed in parameters to the <router-link>. It seem to grab the route parameters from the current component to generate the route parameters for the named route url.
I can not find anything about this in the Vue.js documentation about the fact that this is being done automatically.
If I inspect the router-link component with the Vue devtools it does have a props object which contains a to object which holds the parameters. I can't seem to find any documentation on this though.
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)