Vue 多个平行页面间传值，非组件间传递，简单易懂

一、使用路由传递参数

---

A页面和B页面是两个平行页面，非父子组件关系，先要将A页面的参数传递到B页面中。

⚠️注意 ：query 中的参数 params ，需要使用  JSON.stringify({}) 方法，把对象转化成JSON字符串

A.vue 页面

<el-button type="primary" size="medium" icon="el-icon-plus" @click="add">新建订单</el-button>

add() {
    this.$router.push({
        path: '/ad/order/add' ,
        query: {params: JSON.stringify({id: 1, name: 'xiaoming'})}
    })
},

 

 

B.vue 页面

我们直接使用  this.$route.query.row 来获取路由传递过来的参数！

created() {
    this.params =  JSON.parse(this.$route.query.params) // 获取从router中传过来的参数
    console.log('数据是：' , this.params)
},

 

 

二、使用浏览器本地存储

---

A页面使用浏览器的本地存储方法,把要传递的参数，存储在浏览器中

A.vue 页面

// 本地存储
localStorage.setItem('params',JSON.stringify({id: 1, name: 'xiaoming'}))  

// 会话存储
sessionStorage.setItem('params',JSON.stringify({id: 1, name: 'xiaoming'})) 

B.vue 页面

// 本地存储中取值
let params = JSON.parse(localStorage.getItem('params'));  

// 会话存储中取值
let params = JSON.parse(sessionStorage.getItem('params'));  

 

1. sessionStorage

仅在当前会话下有效，关闭页面或者浏览器后被清除；存放数据大小一般为5MB；

// 存储：以“key”为名称存储一个值“value”
sessionStorage.setItem("key","value");

///获取名称为“key”的值
sessionStorage.getItem("key");

//删除名称为“key”的信息。
sessionStorage.removeItem("key");

​//清空sessionStorage中所有信息
sessionStorage.clear();

 

2.localStorage

生命周期永久，除非用户清除浏览器中的localStorage信息，否则永远存在；存放数据大小一般为5MB；仅在浏览器中保存，不参与服务器通信；

//以“key”为名称存储一个值“value”
localStorage.setItem("key","value");

//获取名称为“key”的值
localStorage.getItem("key");

//删除名称为“key”的信息。
localStorage.removeItem("key");

​//清空localStorage中所有信息
localStorage.clear();