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

一，【params】和【query】传值：

传值页面：

<template>
   <div>
     <view class="post-card" v-for="item in postList" v-bind:key="item.id" v-on:click="turnToPost(item.id)">
     </view>
   </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，post方法取值
      let posts = JSON.parse(this.$route.params.postList);//params，post方法取值
      let get1 = this.$route.query.id; //query，get方法取值
  },
  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>