vue 组件传参

Survive by day and develop by night.
talk is cheap, show me the code,make a better result.

目录

概述

vue 传参是一个非常常见的需求。

需求：

1.this.sessionStroe
2. 路由传参

设计思路

实现思路分析

1.sessionstroe

keyvalue数值键值对

2.路由传参

一、params
params有三种传参形式

1、router-link形式传参【在路径中显示参数，刷新页面参数不丢失】

//配置路由
path:‘/path/:id’

//传递方式，在path后面跟上对应的值

//获取参数
$route.params.id

//传递后形成的路径，刷新页面，参数不丢失
/path/id值
2、编程式导航形式传参，通过path匹配路由【在路径中显示参数，刷新页面参数不丢失】

//配置路由
path:‘/path/:id’

//传递方式，通过path匹配路由，且在path后面跟上对应的值
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … path: `/path/{id}`
})

//获取参数
$route.params.id

//传递后形成的路径，刷新页面，参数不丢失
/path/id值
3、编程式导航形式传参，通过name匹配路由【不在路径中显示参数，刷新页面参数丢失】

//传递方式,通过name匹配路由
this.$router.push({
name: “name”, //路由配置中的name
params:{
id:222
}
});

//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数丢失
/path
二、query
query有三种传参形式

1、router-link形式传参【在路径中 ？后面显示参数，刷新页面参数不丢失】

//传递方式

//或者

//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数不丢失
/path?id=123
2、编程式导航形式传参，通过path匹配路由【在路径中 ？后面显示参数，刷新页面参数不丢失】

//传递方式，通过path匹配路由
this.$router.push({
path:‘/path’,
query: {
id:‘123’
}
})

//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数不丢失
/path?id=123
3、编程式导航形式传参，通过name匹配路由【在路径中 ？后面显示参数，刷新页面参数不丢失】

//传递方式，通过name匹配路由
this.$router.push({
name:‘name’,//路由配置中的name
query: {
id:‘123’
}
})

//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数不丢失
/path?id=123
总结：query和params分别都有三种形式可以传参：

router-link形式
通过path匹配路由的编程式导航形式
通过name匹配路由的编程式导航形式

而这其中只有params方式的 通过name匹配路由的编程式导航形式 不会在路径中带有参数（且刷新页面参数丢失），其他都会带有参数值（刷新页面参数不丢失）

拓展实现

这里参考：github:简单实现上述流程：
入门级实现:
: 部分源码实现.
: 源码实现

性能参数测试：

无

参考资料和推荐阅读

1. 路由传参.

欢迎阅读，各位老铁，如果对你有帮助，点个赞加个关注呗！~