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>