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.
Related
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
Ìm new to vue.js and I#m practicing routing right now.
My router.js looks like this:
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
},
{
path: '/myView',
name: 'myView',
component: () => import('./views/myView.vue')
}
]
})
Now I thought the name option referred to the name I've given the "component".
For example, I tried out the following with "myView" view:
<template>
<div>
<myWorld placeholder="tester"/>
</div>
</template>
<script>
import myWorld from '#/components/myWorld.vue'
export default {
name: 'sklfdjns',
components: {
myWorld
}
}
</script>
As you can see, the name is just gibberish. If the name option in the router really referenced this name in the component, Id expect it to fail.
But it doesnt. Everything works just fine.
Then I tried out changing the name in the router option, but nothing changed as well.
So what does this name option actually do?
Unfortunately, the official Documentation wasnt helpful for me either..
https://router.vuejs.org/guide/essentials/named-routes.html
As mentioned in docs router names are different than component names
purpose of named routes is to navigate without giving full URL i.e just by giving name and it's not reference to component name it's just name of your route
router.push({ name: 'user', params: { userId: 123 }})
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
both will navigate to user route which is '/user/:userId'
As stated in the docs you posted, the name can be added for convenience. This can be helpful for longer paths or for iterating your routes into a menu for example.
To call such a route you then can use the name instead:
<router-link :to="{ name: 'home' }">home</router-link>
Another convenience example where i used the names before is iterating it into a menu with $route.name, you want readable names there.
Adding to Answer 1... the name mostly used when you want to push users from one page to another after something has happened
this.$router.push({name:'details'})
if the details name does not exist, you get an error
and also when you are also specific to a particular route, according to the first answer
the name in the component specifics name of that component.
This is useful in vue devtool for debugging, or when you want to render a component recursively, you have to set a name for the component. For example, you want to render component comment inside the template of a comment (to display sub-comment).
The name in router is name of that route.
For example:
you have a route like this
{
path: '/',
component: Home
},
when you want to go to the root page, you do some thing like this, right?
this.$router.push('/')
What if I want to change the root path to /admin?
I will have to find all this code this.$router.push('/') and replace the path? No way!
Instead, I will specific a route name name: 'root', and navigate through routes by name.
{
path: '/',
name: 'root',
component: Home
}
this.$router.push({ name: 'root' });
Once I want to change the route path, I just change the path in router.js
The name in component property and the one from route has no relation.
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 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 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.