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;
Related
Current URL is 'https://localhost:3000/lang/countries/states/cities/'
I want to change it to:
https://localhost:3000/lang/compare/?c=1&back=1&query=94&query=911
Basically I want to edit the current URL. I tried using:
this.$router.push({
path:'/lang/compare/?c=1&back=1&query=94&query=911',
});
this.$router.replace({
path:'/lang/compare/?c=1&back=1&query=94&query=911',
});
But this changes the URL to :
https://localhost:3000/lang/countries/states/cities/lang/compare/?c=1&back=1&query=94&query=911',
I have tried using window location href but coz of that state of my variable is lost, hence I need to use VUE router for this. Is their any way to change base URL in VUE routes.
Your method is also right it should work if there is no other issue,
try with
this.$router.push({ path: '/lang/compare', query: { c: 1,back:1,firstquery:94,queryB:991}})
or you can also try with $router name defining a name on router index file
{
path: "/lang/compare",
name: "compare",
component: comparePage,
},
this.$router.push({ name: 'compare', query: { c: 1,back:1,firstquery:94,queryB:991}})
In my Vue 2.7.5 app (using Vue Router 3.5.4) I'm trying to define this route
{
path: '/messages/:messageId?/replies/:replyId?',
name: 'messages',
component: () => import('#/views/messages')
}
The intent is
to see all messages use /messages
to see a specific message use /messages/:messageId
To see a specific message and a specific reply to that message use /messages/:messageId/replies/:replyId
However, if I navigate to this route without specifying any route params using
<router-link :to="{name: 'messages'}">
Then the URL is resolved as /messages/replies, but I would like it to be resolved as /messages.
Essentially, what I want is: don't include /replies unless there's a replyId param, but I don't know how to express that.
One solution is to use the following instead:
<router-link :to="{ path: '/messages'}">
But I prefer to always refer to routes by name, because this gives me the flexibility to change the paths without breaking anything
The easiest solution for you is to remove /replies and only have path like this:
'/messages/:messageId?/:replyId?'
(Optional solution)
If removing that part of url is not an option and using named routes is a must, here is an alternative solution where you use two named routes. If the replyId is missing you can redirect before enter to the 2nd named route.
{
path: '/messages/:messageId?/replies/:replyId?',
name: 'message-replies',
component: () => import('#/views/messages'),
beforeEnter({ params }) {
if (!params.replyId) {
return {
name: 'messages',
params: {
messageId: params.messageId,
},
};
}
},
},
{
path: '/messages/:messageId?',
name: 'messages',
component: () => import('#/views/messages'),
},
I have functions which is redirecting user in 4 seconds, but I need to pass props somehow:
setTimeout(() => {
clearInterval(intervalId)
this.$router.push({ path: `/${this.$store.state.locale}/my-cart` })
}, 4000)
I was trying to do something like that:
this.$router.push({ name: '/${this.$store.state.locale}/my-cart', params: {step: '2'} })
This didn't work, this route redirects on main page, so, how can I do that?
this.$router.push({ path: '/${this.$store.state.locale}/my-cart', params: {step: '2' }})
please change the name and replace path into code
If you want to use url to declare for a path. You need to change "name" to "path".
this.$router.push({ path: '/${this.$store.state.locale}/my-cart', params: {step: '2'} })
Else you want to use name, you can pass value of name attribute that define in route.js file instead pass url.
this.$router.push({ name: 'namePath', params: {step: '2'} })
I have a have a list of links inside a childcomponent which is integrated in different pages and if I click on a link, I need to get an id back, but I need to keep the current URL with the new id to call another method.
this.$router.push({path: '/page/', params: {id:id}})
this.$router.push({path: '/otherpage/', params: {id:id}})
I tried several things which are not working, like
this.$router.push({path: this.$router.currentRoute, params: {id:id}})
to get the following on different pages
http://domain/page/1
or
http://domain/otherpage/1
if I hardcode the path it works with:
this.$router.push(`/page/${id}`)
but I like to reuse the component on any page
thanks to Igor I ended up with the following:
const path = `/${this.path}/${node.id}`
if (this.$route.path !== path) this.$router.push(path)
thanks
From vue-router docs:
Note: params are ignored if a path is provided...
https://router.vuejs.org/guide/essentials/navigation.html
Instead of providing the path, you should call this.$router.push() with the route name, and the desired params.
For your example:
this.$router.push({name: this.$router.currentRoute.name, params: {id:id}})
This approach assumes that your routes are named, like this:
const routes = [
{
path: "/page/:id",
component: () => import('/path/to/component.vue'),
name: "nameOfTheRoute",
// other attributes
},
//...
]
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.