Vue页面间传值，【params】和【query】以及localStorage缓存传值（obj缓存传值）

一，【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>

标签：objdata,缓存,localStorage,Vue,params,query,id,传值
来源： https://www.cnblogs.com/gyw1996/p/15923959.html