Vue路由傳參props解耦的三種方式小結(jié)

更新時(shí)間：2022年12月07日 09:46:36 作者：鍵.

這篇文章主要介紹了Vue路由傳參props解耦的三種方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

路由組件傳參

在組件中使用 $route 會(huì)使之與其對(duì)應(yīng)路由形成高度耦合，從而使組件只能在某些特定的 URL 上使用，限制了其靈活性。

使用 props 將組件和路由解耦：

布爾模式

商品展示界面?zhèn)鬟fid的動(dòng)態(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>

路由配置動(dòng)態(tài)參數(shù)和開啟props解耦

{
    path:'/detail/:id',
    name:'Detail',
    component:()=> import ('../views/Detail.vue'),
    props:true
}

<template>
	<div class="detail">
		<p>這是詳細(xì)頁</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ì)頁面。

注意：對(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ì)頁</p>
		<p>{{id}}</p>		
	</div>
</template>
<script>
	export default{
		name:'Detail',
		props:['id'],
		data(){
			return{
					
			}	
		}
	}
</script>

通過這個(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ì)頁</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ù)為無狀態(tài)的，因?yàn)樗粫?huì)在路由發(fā)生變化時(shí)起作用。

如果你需要狀態(tài)來定義 props，請(qǐng)使用包裝組件，這樣 Vue 才可以對(duì)狀態(tài)變化做出反應(yīng)。