这篇文章主要介绍了关于通过vue属性$route的params传参，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
vue传值 与 vue传参是两块东西
概念图
![7236116-0547879284bcabfc[1].png](https://img.php.cn//upload/image/919/256/893/1531116889150710.png "1531116889150710.png")
原理
vue传参的原理主要在于 Vue.$route.params (也有 $route.query)
$route是Vue的属性,params是$route的属性,用来储存数据的键值对(对象形式,{key:value}),储存很多属性(键值对,属性,属性值)在里面.
立即学习“前端免费学习笔记（深入）”；
清单:
通过浏览器插件vue devtools(vue 开发者工具插件)可以看的到$route属性内部的具体数据:![7236116-9ba1b155f3155445[1].png](https://img.php.cn//upload/image/411/831/165/1531116949403541.png "1531116949403541.png")
$route.params,**可以说于$route是一个中间容器**,用来容纳参数,是键值对的方式,这样在这个页面执行动作传递参数到$route.params,在另外一个页面就能从$route.params里拿参数,就这么回事.
在路由里定义
//router >> index.js
{
path: '/Page9/:abc/:cde',
name: 'Page9',
component: Page9
}意思就是我要往 Vue.$route.params里储存属性"abc"和"cde",它们是作为属性名,键名key,
而属性值则由点击路由后触发路径的变化来决定具体的值.要传输什么就写什么,比如
//App.vue点击就跳转到page9,并同时传参到Vue.$route.params
//Page9.vue
{{ msg }}
{{this.$route.params}}
拿数据
意思是最后Vue.$route.params会储存{"abc" : "gigi" ,"cde" : "lkjdk7338"}
或者用编程路由的写法,在脚本js里写要传的参:
html:
js:
sj1() {
this.$router.push({
path: '/Page9',
name: 'Page9',
params: {
abc: this.mydata,
cde: 'dlj'
}
})意思是是最后Vue.$route.params会储存{"abc" : this.mydata这个数据 ,"cde" : ''dlj''}
如何拿值:
这就很简单了:
直接从Vue.$route.params里拿就行了
{{ $route.params.abc }} --> "gigi" 或者 this.mydata具体的值
{{ $route.params.abc }} --> " lkjdk7338 "
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
