How to decouple routing parameters in vue

Editor to share with you how to achieve vue routing parameter decoupling, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Routing parameter decoupling

Routing parameters are generally used within components, and most people do this:

Export default {methods: {getParamsId () {return this.$route.params.id}

The use of $route in a component makes it highly coupled to its corresponding route, thus limiting its flexibility by making the component available only on certain URL.

The right thing to do is to decouple through props

Const router = new VueRouter ({routes: [{path:'/ user/:id', component: User, props: true}]})

When the props property of the route is set to true, the params parameter can be received within the component through props

Export default {props: ['id'], methods: {getParamsId () {return this.id}

In addition, you can return props through function mode.

Const router = new VueRouter ({routes: [{path:'/ user/:id', component: User, props: (route) = > ({id: route.query.id})}) these are all the contents of the article "how to decouple routing parameters in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!