Vue路由传参props解耦的三种方式小结

路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。

使用 props 将组件和路由解耦:

布尔模式

商品展示界面传递id的动态参数

<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>

路由配置动态参数和开启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>

效果:现在点击了每个商品之后,都能够将相应的商品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>

通过这个结果可以看出,对象模式只能传布尔值

如果 props 是一个对象,它会被按原样设置为组件属性。当 props 是静态的时候有用。

const router = new VueRouter({
 routes: [
 {
 path: '/promotion/from-newsletter',
 component: Promotion,
 props: { newsletterPopup: false }
 }
 ]
})

函数模式

{
 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>

效果:

你可以创建一个函数返回 props

这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等。

const router = new VueRouter({
 routes: [
 {
 path: '/search',
 component: SearchUser,
 props: route => ({ query: route.query.q })
 }
 ]
})

URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。

请尽可能保持 props 函数为无状态的,因为它只会在路由发生变化时起作用。

如果你需要状态来定义 props,请使用包装组件,这样 Vue 才可以对状态变化做出反应。

总结

作者:键.原文地址:https://blog.csdn.net/beekim/article/details/120569758

%s 个评论

要回复文章请先登录注册