Vue路由傳參props解耦的三種方式小結(jié)
路由組件傳參
在組件中使用 $route
會(huì)使之與其對(duì)應(yīng)路由形成高度耦合,從而使組件只能在某些特定的 URL 上使用,限制了其靈活性。
使用 props
將組件和路由解耦:
布爾模式
商品展示界面?zhèn)鬟fid的動(dòng)態(tài)參數(shù)
<template> <div class="home"> <TabBar></TabBar> <p>這是首頁(yè)</p> <ul> <li v-for="(item ,index) in goods" :key="item.id"> <!-- <router-link :to="{path:'/detail',query:{item}}"> --> <router-link :to="{name:'Detail',params:{id:index}}"> <p><img :src="item.path" ></p> <p>{{item.name}}</p> <p>{{item.price}}</p> </router-link> </li> </ul> </div> </template>
路由配置動(dòng)態(tài)參數(shù)和開(kāi)啟props解耦
{ path:'/detail/:id', name:'Detail', component:()=> import ('../views/Detail.vue'), props:true }
<template> <div class="detail"> <p>這是詳細(xì)頁(yè)</p> <p>{{id}}</p> </div> </template> <script> export default{ name:'Detail', props:['id'],//注意props要和data(){}是同一級(jí)的 data(){ return{ } } } </script>
效果:現(xiàn)在點(diǎn)擊了每個(gè)商品之后,都能夠?qū)⑾鄳?yīng)的商品id傳遞到詳細(xì)頁(yè)面。
注意:對(duì)于包含命名視圖的路由,你必須分別為每個(gè)命名視圖添加 props
選項(xiàng)
const User = { props: ['id'], template: '<div>User {{ id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true }, // 對(duì)于包含命名視圖的路由,你必須分別為每個(gè)命名視圖添加 `props` 選項(xiàng): { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ] })
對(duì)象模式
{ path:'/detail/:id', name:'Detail', component:()=> import ('../views/Detail.vue'), // props:route=>({params:route.params.id}) props:{id:true} }
<template> <div class="detail"> <p>這是詳細(xì)頁(yè)</p> <p>{{id}}</p> </div> </template> <script> export default{ name:'Detail', props:['id'], data(){ return{ } } } </script>
通過(guò)這個(gè)結(jié)果可以看出,對(duì)象模式只能傳布爾值
如果 props
是一個(gè)對(duì)象,它會(huì)被按原樣設(shè)置為組件屬性。當(dāng) props
是靜態(tài)的時(shí)候有用。
const router = new VueRouter({ routes: [ { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } ] })
函數(shù)模式
{ path:'/detail/:id', name:'Detail', component:()=> import ('../views/Detail.vue'), props:route=>({params:route.params.id})//如果使用的是query傳參則改為query }
<template> <div class="detail"> <p>這是詳細(xì)頁(yè)</p> <p>{{params}}</p> </div> </template> <script> export default{ name:'Detail', props:['params'], data(){ return{ } } } </script>
效果:
你可以創(chuàng)建一個(gè)函數(shù)返回 props
。
這樣你便可以將參數(shù)轉(zhuǎn)換成另一種類型,將靜態(tài)值與基于路由的值結(jié)合等等。
const router = new VueRouter({ routes: [ { path: '/search', component: SearchUser, props: route => ({ query: route.query.q }) } ] })
URL /search?q=vue
會(huì)將 {query: 'vue'}
作為屬性傳遞給 SearchUser
組件。
請(qǐng)盡可能保持 props
函數(shù)為無(wú)狀態(tài)的,因?yàn)樗粫?huì)在路由發(fā)生變化時(shí)起作用。
如果你需要狀態(tài)來(lái)定義 props
,請(qǐng)使用包裝組件,這樣 Vue 才可以對(duì)狀態(tài)變化做出反應(yīng)。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于IDEA中的.VUE文件報(bào)錯(cuò) Export declarations are not supported by cu
這篇文章主要介紹了關(guān)于IDEA中的.VUE文件報(bào)錯(cuò) Export declarations are not supported by current JavaScript version的問(wèn)題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10Vue Element使用icon圖標(biāo)教程詳解(第三方)
element-ui自帶的圖標(biāo)庫(kù)不夠全,還是需要需要引入第三方icon。下面小編給大家?guī)?lái)了Vue Element使用icon圖標(biāo)教程,感興趣的朋友一起看看吧2018-02-02vue中改變了vuex數(shù)據(jù)視圖不更新,也監(jiān)聽(tīng)不到的原因及解決
這篇文章主要介紹了vue中改變了vuex數(shù)據(jù)視圖不更新,也監(jiān)聽(tīng)不到的原因及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03element-ui中el-table不顯示數(shù)據(jù)的問(wèn)題解決
這篇文章主要介紹了element-ui中el-table不顯示數(shù)據(jù)的問(wèn)題解決,這是最近在做列表首頁(yè)時(shí)遇到的一個(gè)問(wèn)題,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07vue2使用element-ui,el-table不顯示,用npm安裝方式
這篇文章主要介紹了vue2使用element-ui,el-table不顯示,用npm安裝方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07el-date-picker日期范圍限制的實(shí)現(xiàn)
本文主要介紹了el-date-picker日期范圍限制的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05vue3 vite pinia配置動(dòng)態(tài)路由、解決刷新頁(yè)面路由消失的問(wèn)題
這篇文章主要介紹了vue3 vite pinia配置動(dòng)態(tài)路由、解決刷新頁(yè)面路由消失的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10