Menu
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?
439
In the composition API, we use the useRoute hook. to get the value of the id route parameter with this. $route.params.id with the options API. We call useRoute to return the route object and then we get the value of the id route parameter with route.params.id .
To listen for route change events with Vue. js and Vue Router, we can watch the $route object in our component. to watch the $route in our component. We set deep to true to watch for all changes in the $route object's contents.
You can do that by adding a parameter and making it optional. { path: '/users/:id? ', // id is optional components: Users, ... } To make a query parameter optional – you need to add a question mark "?" after the parameter name.
Adding dynamic routes in VueUpdate the router/index. js file with the new route in the routes array. Remember to include the import for the Post component. Restart your app and head to localhost:8080/post/dynamic-routing in your browser.
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; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
