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();