一,【params】和【query】传值:
传值页面:
<template>
<div>
<el-card class="post-card" v-for="item in postList" v-bind:key="item.id"
v-on:click="turnToPost(item.id)">
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
postList: [{ id:1 }]
};
},
methods: {
turnToPost: function(id) {
//参数传值
this.$router.push({
name: "about",//页面名称
//path: '/blog/about',//name和path用其一就可以
params: { id: id, postList:JSON.stringify(this.postList) },//post,params放法
query: { id: id }//post,query放法
});
}
}
};
</script>
取值页面
<template>
<div class="about">
<h1>about</h1>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted: function() {
let post = this.$route.params.id; //params
let posts = JSON.parse(this.$route.params.postList);//params
let get1 = this.$route.query.id; //query
},
methods: {}
};
</script>
二,用本地缓存传值:
传值页面:
<template>
<div> <el-card class="post-card" @click="shenhe"> </el-card> </div>
</template>
<script>
export default {
data() {
return {
objdata:{ name:'你好',id:1 },
time:'2021-10-02'
}
},
methods: {
shenhe(){
localStorage.setItem('objdata',JSON.stringify(objdata))//参数传值obj
localStorage.setItem('time',time)//参数传值 单个
}
}
</script>
取值页面:
<template>
<div class="about">
<h1>about</h1>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted: function() {
let time = localStorage.getItem("time"); //获取值单个
let objdata = JSON.parse(localStorage.getItem('objdata'))//获取obj
},
methods: {}
};
</script>