这篇文章主要讲解了“Vue路由传参及props实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue路由传参及props实例分析”吧！
路由传参总的来说有两种方式，query和params，配合声明式导航与编程式导航，各有不同的几种写法；
计算
安全
数据库
网络和加速
企业服务
//路由配置
{
path: '/a01',
name: 'a01',
component: a01
}//传参方式1--通过url拼接，使用?分割
<router-link to="/a01?data=a01">a01</router-link>
//传参方式2--传入对象
<router-link :to="{ path: '/a01', query: { data: 'a01' } }">a02</router-link>路由配置方式不变；
//绑定事件
<span @click="btn('/a01', 'a01')">b01</span>
//处理路由方式1，通过path配合query
btn(path, data) {
this.$router.push({
path,
query: {
data,
},
});
},
//处理路由方式2，通过name配合query
btn1(name, data) {
this.$router.push({
name,
query: {
data,
},
});
},1.参数在url中展现，使用？分割。属性和值以键值对形式存在
2.子组件通过$route.query.xxx方式获取参数（xxx为自己定义的参数名）
params传参分为两种情况，路径占位与不占位
params配合声明式导航：
//路由声明需要使用‘：'占位
{
path: '/a02/:data',
name: 'a02',
component: a02
}//传参方式1--url拼接，不需要？分割
<router-link to="/a02/a02">a02</router-link>
//传参方式2--传对象
<router-link :to="{ path: '/a02/a02' }">a02.1</router-link>params配合编程式导航：
btn1(name, data) {
this.$router.push({
name,
params: {
data,
},
});
},params传参配合路径占位的特点：
1.参数在url中展现，没有？=等额外标签
2.子组件以$route.params.xxx方式获取参数（xxx为自己定义的参数名）
声明式导航
<router-link :to="{ name:'a02',params:{data:'a02'} }">a02.1</router-link>注意！！需要使用name，不可以使用path，官网解释如下：
注意：如果提供了 path，params 会被忽略，你需要提供路由的 name 或手写完整的带有参数的 path
编程式导航
//路由配置
{
path: '/a03',
name: 'a03',
component: a03
}
//路由跳转
<span @click="btn3('a03', 'a03')">b04</span>
btn3(name, data) {
this.$router.push({
name,
params: {
data,
},
});
},params传参占位的特点：
1.参数在不在url体现
2.刷新后数据丢失
vue的组件是可以复用的，但是路由给子组件传值后，通过$route获取参数会导致子组件无法复用，解决这个问题，需要用到props解耦；
具体使用：
1.在路由配置时使用props
{
path: '/a02/:data',
name: 'a02',
component: a02,
//使用props传参
props: true
}2.父组件传参，没有变化
3.子组件使用props接收
<template>
<p>{{ data }}</p>
</template>
<script>
export default {
props: {
data: {
type: String,
},
},
};
</script>props为布尔值 true 开启props接收，false关闭。
上例我们演示的就是这样的情况，但是，props为布尔值时，只适用于params传参，对query不适用；
props配置为函数，可以获取query方式的传值，通过route.query.xxx方式
//配置
{
path: '/a01',
name: 'a01',
component: a01,
props: (route) => ({ data: route.query.data })
}
//传参--与query一致
<router-link to="/a01?data=a01">a01</router-link>
//接收
<template>
<p>{{ data }}</p>
</template>
<script>
export default {
props: {
data: {
type: String,
},
},
};
</script>props对象模式直接传递固定值，不需要再传参；
//配置
{
path: '/a01',
name: 'a01',
component: a01,
props: {data:'123'}
}感谢各位的阅读，以上就是“Vue路由传参及props实例分析”的内容了，经过本文的学习后，相信大家对Vue路由传参及props实例分析这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
