vue传值 与 vue传参是两块东西
概念图原理
vue传参的原理主要在于 vue.$route.params (也有 $route.query)
$route是vue的属性,params是$route的属性,用来储存数据的键值对(对象形式,{key:value}),储存很多属性(键值对,属性,属性值)在里面.
清单:通过浏览器插件vue devtools(vue 开发者工具插件)可以看的到$route属性内部的具体数据:
$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<router-link to="/page9/gigi/lkjdk7338"> 点击就跳转到page9,并同时传参到vue.$route.params</router-link>
//page9.vue<template> <p class="page1"> <h1>{{ msg }}</h1> <p>{{this.$route.params}}</p> <h3 @click="nsj">拿数据</h3> </p></template><script> export default{ name:'page9', data(){ return{ msg:'i am page9.vue' } }, methods:{ nsj(){ this.msg = this.$route.params.asd } } }</script>
意思是最后vue.$route.params会储存{"abc" : "gigi" ,"cde" : "lkjdk7338"}
或者用编程路由的写法,在脚本js里写要传的参:
html:
<p><button @click="sj1">点击就跳转到page9,并同时传参到</button></p>
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
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
vue-router+nginx非根路径的配置方法
vue如何解决addroutes动态添加路由后刷新失效的问题
以上就是通过vue属性$route的params传参的详细内容。