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:简单实现上述流程:
入门级实现:
: 部分源码实现.
: 源码实现
性能参数测试:
无
参考资料和推荐阅读
- 路由传参.
欢迎阅读,各位老铁,如果对你有帮助,点个赞加个关注呗!~