(原创)vue传参之通过Vue属性$route的params传参
vue传值 与 vue传参是两块东西概念图原理vue传参的原理主要在于 Vue.route.params(也有route.params(也有route.params (也有 route.query)route是Vue的属性.params是route是Vue的属性.params是route是Vue的属性.params是route的属性,用来储存数据的键值对.就是说它对象,...
vue传值 与 vue传参是两块东西
概念图
原理
vue传参的原理主要在于 Vue. route.params(也有 r o u t e . p a r a m s ( 也 有 route.query)
route是Vue的属性.params是 r o u t e 是 V u e 的 属 性 . p a r a m s 是 route的属性,用来储存数据的键值对.就是说它对象,储存很多属性(键值对,属性,属性值)在里面.
清单:
通过浏览器插件vue devtools(vue 开发者工具插件)可以看的到$route属性内部的具体数据:
route.params,可以说于 r o u t e . p a r a m s , 可 以 说 于 route是一个中间容器,用来容纳参数,是键值对的方式,这样在这个页面执行动作传递参数到 route.params,在另外一个页面就能从 r o u t e . p a r a m s , 在 另 外 一 个 页 面 就 能 从 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>
<div class="page1">
<h1>{{ msg }}</h1>
<p>{{this.$route.params}}</p>
<h3 @click="nsj">拿数据</h3>
</div>
</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里拿就行了 {{
route.params.abc }} –> “gigi” 或者 this.mydata具体的值
{{ $route.params.abc }} –> ” lkjdk7338 “
更多推荐
所有评论(0)