小編給大家分享一下vue如何實現路由參數解耦，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
路由參數解耦
一般在組件內使用路由參數，大多數人會這樣做：
export default { methods: { getParamsId() { return this.$route.params.id } } }在組件中使用 $route 會使之與其對應路由形成高度耦合，從而使組件只能在某些特定的 URL 上使用，限制了其靈活性。
正確的做法是通過 props 解耦
const router = new VueRouter({ routes: [{ path: '/user/:id', component: User, props: true }] })將路由的 props 屬性設置為 true 后，組件內可通過 props 接收到 params 參數
export default { props: ['id'], methods: { getParamsId() { return this.id } } }另外你還可以通過函數模式來返回 props
const router = new VueRouter({ routes: [{ path: '/user/:id', component: User, props: (route) => ({ id: route.query.id }) }] })以上是“vue如何實現路由參數解耦”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
