Menu
Here is my router config.
const router = new VueRouter({
routes: [
{
path: '/user/:id',
components: User,
props: {
sidebar: true
}
}
]
})
I can't access to all props (e.g sidebar and id), only sidebar in this config.
Any ideas ?
377
To recap, if you need to pass data from Link through to the new component that's being rendered, pass Link s a state prop with the data you want to pass through. Then, to access the Link s state property from the component that's being rendered, use the useLocation Hook to get access to location.
Vue Router 4 provides multiple ways of doing this: from setting the props property on the route record to true and automatically passing all params as props, setting the props property to a static object to provide static props, or setting it to a function that returns the desired props.
The way it works is that you define your data on the parent component and give it a value, then you go to the child component that needs that data and pass the value to a prop attribute so the data becomes a property in the child component. You can use the root component (App.
If I understand you correctly, you want to set the prop sidebar to true (static) and the prop id to the :id URL parameter (dynamic).
You'll have to use a function which takes the route as a parameter and returns the prop values you want to set on the component:
props: route => ({
id: route.params.id,
sidebar: true,
})
Have a look at Function Mode in the vue-router docs for more information.
72
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
