vue頁面傳參和接參

2022-06-30 05:12:09 字數 1171 閱讀 9478

js**

this.$router.push(})//跳轉傳引數

//接參

console.log(this.$route.params)

頁面**

在父路由元件上使用router-link進行路由導航,傳參用的形式向子路由元件傳遞引數。使用router-view進行子路由頁面內容渲染,父路由元件childone.vue 如下:

這是父路由childone對應的元件頁面

下面可以點選顯示巢狀的子路由

顯示登入頁面

顯示註冊頁面

子路由通過 this.$route.params.num 的形式來獲取父路由向子路由傳遞過來的引數,子路由元件login.vue如下:

登入介面:這是另乙個巢狀路由的內容

注意:如上所述路由定義的path: "/one/login/:num"路徑和to="/one/login/001"必須書寫正確,否則不斷點選切換路由,會因為不斷將傳遞的值顯示新增到url中導致路由出錯,如下

傳遞的值存在url中存在安全風險,為防止使用者修改,另一種方式不在url中顯示傳遞的值

params傳參(url中不顯示引數)

定義路由時新增name屬性給對映的路徑取乙個別名,router>index.js檔案修改router如下:

在父路由元件上使用router-link進行路由導航,使用   形式傳遞引數。注意   ': to= ' 前面的冒號,childone.vue元件修改如下:

這是父路由childone對應的元件頁面

下面可以點選顯示巢狀的子路由

顯示登入頁面

顯示註冊頁面

子路由元件頁面獲取父路由傳參方式不變,reg.vue 檔案如下:

登入介面:這是另乙個巢狀路由的內容

注意:上述這種利用params不顯示url傳參的方式會導致在重新整理頁面的時候,傳遞的值會丟失;

使用query實現路由傳參

定義路由 router>index.js檔案如下:

修改路由導航 ,childone.vue 檔案修改如下:

這是父路由childone對應的元件頁面

下面可以點選顯示巢狀的子路由

顯示登入頁面

顯示註冊頁面

子路由元件通過 this.$route.query.num 來顯示傳遞過來的引數,reg.vue 檔案如下:

註冊介面:這是二級路由頁面

vue頁面傳參

sessionstorage localstorage 頁面重新整理,丟失資料問題 路由配置 路由跳轉方式 this.router.push user 123 this.router.push this.router.push 跳轉後的頁面,獲取引數this.route.params.userid ...

vue頁面傳參

1 傳的引數是陣列 傳遞引數的頁面 let setstr encodeuricomponent json.stringify this.tabledata this.router.push send setmessageself?setstr setstr 接收引數頁面 mounted 解釋 首先是...

vue頁面跳轉傳參問題傳參

vue 的頁面跳轉以及頁面之間傳參其實是乙個很常見的問題,但是整體上會使用的次數很多,有時候頁面的跳轉不需要引數,因為他屬於那種公共的,大家都可以看到。但是當乙個頁面屬於我們非公共的頁面時,我們就需要我們的資料跟著跳轉過來了,比如說我們的個人資訊或者是個人設定,這些都需要我們去帶著引數去請求,否則服...