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?
Related
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' },
}
So I have a project Page and when I click in one project I want to go to Project Detail page of that project. so I'm using dynamic routes. I pass as parameters a name(that will show on URL) and Id(that I use to go to my store and get the project, this Id is not showing on URL). Everything is ok, the problem is when I Load the browserinside the project Detail page, I only get name as a parameter and I cant get the Id so because of that I cant match the Id with my vuex because there is no Id.
this is my router-link on parent
<router-link class="project__icon" :project="project" :to="{ name: 'projectDetail', params: {name: project.name.replace(' ', ''), id: project.id} }">
and this is what I do on other page to get my project Id inside Vuex
const projectId = this.$route.params.id;
this.project = this.$store.getters.getProject(projectId);
This is what I get when I click on router
http://localhost:8080/project/myprojectName
On my router file I have this
{
path: '/project/:name',
name: 'projectDetail',
component: ProjectDetail,
},
I'm not sure why you are binding project to the router-link, shouldn't be necessary.
<router-link class="project__icon" :to="{ name: 'projectDetail', params: {name: project.name.replace(' ', ''), id: project.id} }">
You need to add :id as a parameter to your route. You can mark it optional with a ?.
{
path: '/project/:name/:id?',
name: 'projectDetail',
component: ProjectDetail,
}
Also, if you set props: true you can decouple your component from the router and instead of using this.$route.params.id, your detail component will receive the parameters as props.
{
path: '/project/:name/:id?',
name: 'projectDetail',
component: ProjectDetail,
props: true,
}
EDIT: You have to have the id in the url if you want to allow refreshing and still keep the id or you have to store it somewhere like localstorage or sessionstorage.
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'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.
I am using Vue with vue-router. For product items in a list view I would like to generate JSON-LN annotations with the url attribute set to the path of the product detail view.
I know I can get the current route's path by using this.$route.path but is there a way to get a distinct route path as it would be rendered with
<router-link :to={name: 'ProductDetail', params: {id: some_id, slug: some_slug}}></router-link>
to inject the route's path somewhere else?
You are looking for the Router instance's resolve method:
Given location in form same as used in <router-link/>, returns object with the following resolved properties:
{
location: Location;
route: Route;
href: string;
}
In your case you could do something like this to get the url:
let props = this.$router.resolve({
name: 'ProductDetail',
params: { id: some_id, slug: some_slug },
});
return props.href;