Vue 中路由传参（动态路由匹配）

一、解释

把数据从一个路由页面传递到另外一个页面的技术

这里列举了 params 和 query 的传参方式

二、案例

案例展示手机列表页传参到手机详情页面（传递的是id）

① params

1-1、在路由规则中设置接收参数（谁接收数据，就在谁的路由规则中设置）--这里详情页接收数据

 {path: '/Phone',name: 'Phone', component: Phone },{//   /:某某path: '/PhoneDetails/:phoneId', //接收数据的规则上设置接收参数name: 'PhoneDetails', component: PhoneDetails },

1-2、发送数据（父给子发）--通过事件触发

编程式：this.$router.push({name:"你要跳转的路由规则的name",params:{你配置的接收参数:"数据"}})

标签：<router-link v-bind:to="{name:"你要跳转的路由规则的name",params:{你配置的接收参数:"数据"}}"></router-link>

<script>
export default {methods: {//点击事件goLink(id) {this.$router.push({name:"PhoneDetails",params:{phoneId:id}})//这种 ``也可以// this.$router.push({//   path: `/PhoneDetails/${id}`,// })},},
}
</script>

1-3、接收数据 this.$route.params.xxx （route 没有r） (详情也就是儿子接收)

<template><div><h3>我是详情页</h3><h3>ID:{{this.$route.params.phoneId}}</h3></div>
</template>

② query

2-1、发送数据不需要路由上配置了（两种格式）

this.$router.push({name:"你要跳转的路由规则的name",query:{接收参数:"数据"}})

this.$router.push({path:"你要跳转的路由的路径",query:{接收参数:"数据"}})

//query传参
// this.$router.push({name:"PhoneDetails",query:{phoneId:id}})

2-2、接收数据 ---- this.$route.query.xxx

<h2>id:{{this.$route.query.phoneId}}</h2>

三、案例效果 -----注意看url路径的变化

四、两者的区别

	params	query
用法上	params只能用name	可以使用 path 也可以使用 name 作为跳转路径
接收上	this.$route.params.xxx	this.$route.query.xxx
url 展示上	params url只有val 不显示key 相对来说安全一些	query 是 key=val ( query显示key相对来说不安全 )
效果上

五、$router与$route

$router : 他是vueRouter的全局对象，由于我们在vue对象里把vueRouter对象植入到根属性里，所以，在组件内部是可以使用$router拿到该对象的 (它里面包含了对路由全局操作的属性和方法)

$route: 就是一个路由对象每一个路由都有一个route对象也就是说他是类似于局部页面路由的一个对象,他只能处理当前路由页面的操作 ( 表示匹配到的当前路由对象 )

六、代码

phone.vue

<template><div class="phone"><divclass="phone-item"v-for="(v, i) in arr":key="i"@click="goLink(v.id)"><div class="cont-tit">{{ v.tit }}</div><div><img :src="v.img" /></div></div></div>
</template><script>
export default {data() {return {arr: [{id: '001',tit: '手机热销',img: 'https://shopstatic.vivo.com.cn/vivoshop/commodity/36/10007336_1650358109769_750x750.png.webp',},{id: '002',tit: '折扣手机',img: 'https://shopstatic.vivo.com.cn/vivoshop/commodity/36/10007336_1650358095399_750x750.png.webp',},{id: '003',tit: '热销手机',img: 'https://shopstatic.vivo.com.cn/vivoshop/commodity/11/10007411_1652682629904_750x750.png.webp',},{id: '004',tit: '活动手机',img: 'https://shopstatic.vivo.com.cn/vivoshop/commodity/75/10007475_1653651557950_750x750.png.webp',},{id: '005',tit: '二手手机',img: 'https://shopstatic.vivo.com.cn/vivoshop/commodity/09/10007209_1647845438443_750x750.png.webp',},],}},methods: {goLink(id) {this.$router.push({name:"PhoneDetails",params:{phoneId:id}})//query传参// this.$router.push({name:"PhoneDetails",query:{phoneId:id}})// this.$router.push({//   path: `/PhoneDetails/${id}`,// })},},
}
</script><style scoped >
.phone-item {padding: 20px;
}
.phone-item {background-color: #ccc;margin-top: 15px;
}
.cont-tit {font-size: 14px;color: #3c3c3c;margin-bottom: 10px;
}
img {width: 60px;height: 60px;
}
</style>

phoneDetails.vue

<template><div><h3>我是详情页</h3><h1 @click="goBack()">&lt;</h1><h3>ID:{{this.$route.params.phoneId}}</h3><!-- <h2>id:{{this.$route.query.phoneId}}</h2> --></div>
</template><script>
export default {methods:{goBack(){this.$router.go(-1)}}
}
</script>