I'd like to have query parameters in my Vue.JS application using vue-router like this:
http://localhost:8080/#/home/name=Alice&surname=Smith
I've added this route to my routes in the router.ts:
routes: [{
path: '/home/name=:name&surname=:surname',
name: 'home',
component: Home
}]
What I want to do additionally is the following two things:
1) I want to be able to have the parameters name and surname in any order.
E.g. these two URLs should lead to the same view:
http://localhost:8080/#/home/name=Alice&surname=Smith
http://localhost:8080/#/home/surname=Smith&name=Alice
2) I want them to be optional as well.
Is there a way to do these things? Thank you!
To implement what you want you have to change the route:
routes: [{
path: '/home',
name: 'home',
component: Home
}]
Open this route with query params:
router.push({ name: 'home', query: { name: 'Alice', surname: 'Smith' }});
The url will be (order of the query keys in the url doesn't matter):
http://localhost:8080/#/home?name=Alice&surname=Smith
And inside the route, you can get your query params as this.$route.query.name & this.$route.query.surname.
Check the documentation to get more info.
Related
{
path: '/About',
name: 'About',
component: About,
children: [{
path: '/AddNewDetail',
name: 'AddNewDetail',
component: AddNewDetail,
}]
},
<router-link to="/About/AddNewDetail"></router-link>
the page addnewdetail isnt loading. how to bring in nested url with the component .
Error says: Match not found with the location path
Try to remove the slash in front of AddNewDetail.
If you write a slash in front of it, it becomes a root path in your url, so I guess you could reach it under foo.bar/AddNewDetail. If you want to reach under foo.bar/About/AddNewDetail then write without /
I have a Vue application with the following routes:
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'input',
component: Input
},
{
path: '/result/:city',
name: 'result',
component: Result
}
]
})
I know that if I do a new path with path: '*' and component: someErrorPage, I can show an error page. However, I'd like to redirect back to the input path so they can try again.
EDIT:
After doing some research and looking at my app, I found that if I search an invalid query, it will take me to corresponding route anyway, but not show me the data. Example: If I search a valid city (eg. New York), I am redirected to localhost:8080/result/New York with the correct data. However, if I do an in valid query (eg. a;fldkalf), I will be taken to localhost:8080/result/a;fldkalf without any data. This means that path: '*' will not help me here.
EDIT 2:
I think I may have found something that will help, but I am not sure how to execute it. Vue has something called navigation guards (https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards). If someone could help me make sense of it, that'd be great.
You can add redirect for * (not found) route:
{
path: '*', // make sure this is the last route in Array
redirect: { name: 'input' },
}
basically my issue is that I want to pass a router prop called name into an article route, so something like /article/:name. When I direct to that route internally, like with $router.push(name: 'article', params: {name: 'something'}), it works just fine. But when I then use that url, /article/something, the route doesn't match and the page is blank.
But if I just use /:name instead of /article/:name, everything works just fine. Does anyone have any idea why the /article part could be causing the route to fail to match? Thanks in advance.
EDIT: Route definition:
{
path: '/article/:name',
name: 'article',
component: () => import('../views/Article.vue'),
props: true,
}
When I navigate to /article/something, the page is blank, no matter what something is. But if I have the following route definition:
{
path: '/:name',
name: 'article',
component: () => import('../views/Article.vue'),
props: true,
}
and navigate to /something, it works just fine.
I want to make stepped navigation for user signup page
and i wanna make each step a different route but i need to keep url the same for each of it, so that user won't be able to go straight to step 3.
here is what i currently have
routes:
{
path: '/signup',
component: SignupPage,
children: [
{ path: '', name: 'signup.step1', component: SignupStep1 },
{ path: '', name: 'signup.step2', component: SignupStep2 },
{ path: '', name: 'signup.step3', component: SignupStep3 },
{ path: '', name: 'signup.step4', component: SignupStep4 }
]
}
SignupPage:
<header>...</header>
<router-view />
<footer>...</footer>
SignupStep1:
methods: {
nextStep () {
this.$router.push({ name: 'signup.step2' })
}
...
}
but when nextStep method called nothing seems to change
I'll answer this question short.
Two optimal ways to solve this task - use Vuetify and its ready-to-use Steppers-component and the second one - pass data through params from one step to the next one.
Let me explain the second option: vue-router allows us to easily pass any type of data from one url to another without even showing that data somehow to the end user. How to pass data between urls you can read in vue-router docs and in your case you don't even need 4-5-6 components, it will be enough to use 1 component + tab bars or any other element for switching steps.
but when nextStep method called nothing seems to change
That happens because you have 4 paths with the same value - an empty value. vue-router searches routes from top to bottom and if it finds one that matches current path no other records would be checked, thats why you see only singup-page.
I have two pages in my app with names:
1) album_id.vue
2) albums_id.vue
'id' parameter supposed to be a number. The route for first case should look like { name: '/album', params: {id: '123'}}, and for the second - { name: '/albums', params: {id: '123'}}
The issue is - when I reload the page, it treats the url '.../albums123' as { name: '/album', params: {id: 's123'}}.
The question is:
What is the best way to set a number-validator for the id in this case, using Vue2 and Nuxt?