Vue路由傳參props解耦的三種方式小結(jié)
路由組件傳參
在組件中使用 $route
會使之與其對應(yīng)路由形成高度耦合,從而使組件只能在某些特定的 URL 上使用,限制了其靈活性。
使用 props
將組件和路由解耦:
布爾模式
商品展示界面?zhèn)鬟fid的動態(tài)參數(shù)
<template> <div class="home"> <TabBar></TabBar> <p>這是首頁</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>
路由配置動態(tài)參數(shù)和開啟props解耦
{ path:'/detail/:id', name:'Detail', component:()=> import ('../views/Detail.vue'), props:true }
<template> <div class="detail"> <p>這是詳細頁</p> <p>{{id}}</p> </div> </template> <script> export default{ name:'Detail', props:['id'],//注意props要和data(){}是同一級的 data(){ return{ } } } </script>
效果:現(xiàn)在點擊了每個商品之后,都能夠?qū)⑾鄳?yīng)的商品id傳遞到詳細頁面。
注意:對于包含命名視圖的路由,你必須分別為每個命名視圖添加 props
選項
const User = { props: ['id'], template: '<div>User {{ id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true }, // 對于包含命名視圖的路由,你必須分別為每個命名視圖添加 `props` 選項: { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ] })
對象模式
{ path:'/detail/:id', name:'Detail', component:()=> import ('../views/Detail.vue'), // props:route=>({params:route.params.id}) props:{id:true} }
<template> <div class="detail"> <p>這是詳細頁</p> <p>{{id}}</p> </div> </template> <script> export default{ name:'Detail', props:['id'], data(){ return{ } } } </script>
通過這個結(jié)果可以看出,對象模式只能傳布爾值
如果 props
是一個對象,它會被按原樣設(shè)置為組件屬性。當 props
是靜態(tài)的時候有用。
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>這是詳細頁</p> <p>{{params}}</p> </div> </template> <script> export default{ name:'Detail', props:['params'], data(){ return{ } } } </script>
效果:
你可以創(chuàng)建一個函數(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
會將 {query: 'vue'}
作為屬性傳遞給 SearchUser
組件。
請盡可能保持 props
函數(shù)為無狀態(tài)的,因為它只會在路由發(fā)生變化時起作用。
如果你需要狀態(tài)來定義 props
,請使用包裝組件,這樣 Vue 才可以對狀態(tài)變化做出反應(yīng)。
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于IDEA中的.VUE文件報錯 Export declarations are not supported by cu
這篇文章主要介紹了關(guān)于IDEA中的.VUE文件報錯 Export declarations are not supported by current JavaScript version的問題,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-10-10vue中改變了vuex數(shù)據(jù)視圖不更新,也監(jiān)聽不到的原因及解決
這篇文章主要介紹了vue中改變了vuex數(shù)據(jù)視圖不更新,也監(jiān)聽不到的原因及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03element-ui中el-table不顯示數(shù)據(jù)的問題解決
這篇文章主要介紹了element-ui中el-table不顯示數(shù)據(jù)的問題解決,這是最近在做列表首頁時遇到的一個問題,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-07-07vue2使用element-ui,el-table不顯示,用npm安裝方式
這篇文章主要介紹了vue2使用element-ui,el-table不顯示,用npm安裝方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07vue3 vite pinia配置動態(tài)路由、解決刷新頁面路由消失的問題
這篇文章主要介紹了vue3 vite pinia配置動態(tài)路由、解決刷新頁面路由消失的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10