props路由传参方式
前言:
有时候,当我们传递页面的数据过多的时候,目标页面内会出现大量的 this.$route.query 或者 this.$route.params 进行参数解构,还可能出现 多项 计算属性解构,这样页面会显得代码很冗杂,同时,我们必须进入到组件内部才能知道需要什么样的参数,加大阅读成本,所以希望阅读路由时就知道组件需要什么参数。
所以这时候 就可以使用 props 代理接收参数
如何使用
在目标页面中定义好 Props 及要接收的参数名
<template>
<div>
<h1>{{ id }}</h1>
<h1>{{ name }}</h1>
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
}
},
props: ["id", "name", "title"],
}
</script>
在路由配置中
{
path: '/datapage',
name: 'datapage',
component: datapage,
children: [],
// 第一种方式
// props: { id: 1, name: "张三", title: "标题" } 直接给props 赋值,这时候的值是写死的静态数据
// 第二种方式
// props:true //如果props 设置为true 时,则会默认把props,映射到 params 参数上。
//那么如果,我既要接收params 参数又要 接收 query 参数,通过 props 应该怎么实现呢?
// 第三种方式 props 是一个函数 接收一个参数 可以拿到整个 route 实例对象,所有的 params 和 query 参数都可以在实例上拿取到
props(route) {
console.log(route);
const { a } = route.params
const { names } = route.params
const { titles } = route.query
return { id: a, name: names, title: titles } //拿取到对应的值后,再整合到相应的字段格式上,返回数据
}
},
其他传参方式
params传参
params参数传递也有两种方式:第一种就是在路由路径 path 后面 添加接收参数的字段占位传参,第二种 就是不需要配置占位字段也能传参
配置路由参数字段占位
//路由中配置
{
path: '/datapage/:id', //若id后面加?代表这个参数是可选非必传的,即使不传id也不会导致页面无法访问
name: 'datapage',
component: datapage,
children: [],
},
//页面中跳转
this.$router.push({
path: `/datapage/${"参数"}`, //如果要是用 path 传参 必须使用字符串模板
});
//或
this.$router.push({ //如果要是用 name 传参 就直接 携带一个 params 对象中包含参数
name: "datapage",
params:{
id:"参数字段"
}
});
//目标页面中,读取出参数
this.$route.params.id
无需配置路由参数字段占位
this.$router.push({ //如果未在路由中配置接收参数字段,还要传递 params 参数, 就只能必须使用 name 进行跳转
name: "datapage",
params:{
id:"参数字段"
}
});
//目标页面中,读取出参数
this.$route.params.id
同样都是 params 传参 在路由路径中定义 字段接收占位 和不定义字段 接受的区别 是什么?
答:定义字段路径是因为 参数 是以 路径的形式跟在URL 后面的,这样一来,即使浏览器页面刷新了过后参数也不会丢失。反之如果未配置接收参数字段,虽然参数依然能够正常传递,参数在URL中也不会显示,但是当页面或者浏览器刷新后,当前页面携带过来的参数会造成丢失。
通过 query 传递参数
this.$router.push({
name: "datapage",
query: {
id: "我叫蜘蛛侠"
}
});
this.$router.push({
path: "/datapage",
query: {
id: "我叫蜘蛛侠"
}
});
//页面中读取数据
this.$route.query.id
注明
query 方式传参,无需在路由配置文件中配置参数占位,参数是以 ?id 跟在url 后面的,页面刷新后,参数也不会丢失
补充说明:
如果 query 传递的参数是数组或者对象,地址栏中的参数会被转换成 [object Object] ,页面刷新后,读取不到参数值, 这里建议在传递 数组或对象的参数前,通过 JSON.stringify() 对数据进行序列化处理,目标页面拿到参数后,再进行反序列化即可。