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.
Related
Hello everyone… I’m latin so my english is not very good looking.
I have this <router-link> component in my custom Navbar component.
<router-link :to="{ name: 'blog', params: { currentPage: 1 } }">Blog</router-link>
And this is my route definition:
{
path: "/blog/:currentPage",
name: "blog",
component: () => import(/* webpackChunkName: "blog" */ "#/views/Blog.vue"),
props(route){
const props = { ...route.params }
props.currentPage = parseInt(props.currentPage, 10)
return props
}
}
I have pagination component inside my Blog view.
<button
v-for="page in numberOfPages"
:key="page"
#click="$router.push({ name: 'blog', params: { currentPage: page } })"
:disabled="page == currentPage">
{{ page }}
</button>
I’m switching the page (ie the currentPage route parameter) from there but router-link-active class is only added to <router-link> with currentPage equal to 1 and none other, how can I keep active this <router-link> regardless the value of currentPage route parameter ? My pagination system must to be dynamic, I can't define a new child route for each page because don’t know how many pages will be.
This problem didn't exist in Vue Router 3 but I’m using Vue Router 4.0.3.
I tried to explaine my issue as well as I could.
Can anybody help me please…
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
I want to add product name dynamically in the url. currently it is "http://localhost:8080/product/?ID=1". I want to make it "http://localhost:8080/product/Iphone-11-Pro?ID=1"
Here is the router-link code in the .vue file
<router-link :to="{ path: '/product/', query: { ID: item.id }">...</router-link>
Here is the vue router file
{
path: "/product/",
name: "SingleProduct",
component: SingleProduct,
},
As you can see in the docs (URL: https://router.vuejs.org/guide/essentials/navigation.html) the example looks like this:
// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })
You have to use router.push and than it should work.
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)