Vue 項目功能實現：router 傳遞參數并解決刷新頁面參數丟失問題

AbnerMing 發布于2019-08-23 18:33 / 3658人閱讀

摘要：傳參方式模塊名稱各參數傳參張三效果頁面顯示張三但是刷新頁面后，數據會丟失，顯示。缺點參數值都拼接在上，會很長，同時都可被看到。模塊名稱各參數路由文件設置的時候把參數拼到里。老老實實的用存儲。銷毀頁面的時候把存儲的內容清除。

Vue Router 傳參方式： 1. this.$router.push({ name: "模塊名稱", params: { // 各參數 } }) router.js：

export default new Router({
  routes: [
    {
      path: "/paramsPassingByRouter",
      component: ParamsPassingByRouter,
      children: [
        {
          path: "paramsMode",
          name: "paramsMode",
          component: ParamsMode
        }
      ]
    }
  ]
})

ParamsPassingByRouter.vue：

ParamsMode.vue：


{{ testData }}

效果：

url：http://localhost:8081/#/paramsPassingByRouter/paramsMode
頁面顯示：{"id":"20180101","name":"張三","aka":"z3","age":"18"}

但是刷新頁面后，數據會丟失，顯示：{}。

2. this.$router.push({ name: "模塊名稱", query: { // 各參數 } }) router.js：

export default new Router({
  routes: [
    {
      path: "/paramsPassingByRouter",
      component: ParamsPassingByRouter,
      children: [
        {
          path: "queryMode",
          name: "queryMode",
          component: QueryMode
        }
      ]
    }
  ]
})

ParamsPassingByRouter.vue：

QueryMode.vue：


{{ testData }}

效果：

url：http://localhost:8081/#/paramsPassingByRouter/queryMode?id=20180101&name=%E5%BC%A0%E4%B8%89&aka=z3&age=18
頁面顯示：{"id":"20180101","name":"張三","aka":"z3","age":"18"}

刷新頁面后，數據不會丟失。

解決刷新頁面數據丟失的方案：

使用 this.$router.push({ name: "模塊名稱", query: { // 各參數 } }) 方式傳參。

缺點：參數值都拼接在 url 上，url 會很長，同時都可被看到。

this.$router.push({ name: "模塊名稱", params: { // 各參數 } }) 路由文件設置的時候把參數拼到 url 里。

url：http://localhost:8081/#/paramsPassingByRouter/paramsMode/20180101/%E5%BC%A0%E4%B8%89/z3/18
   缺點：同上。

1 和 2 結合使用：this.$router.push({ name: "模塊名稱", params: { // 各參數 }, query: { // 各參數 } })。

老老實實的用 localStorage 存儲。

url: http://localhost:8081/#/paramsPassingByRouter/paramsMode/z3
   可以與 params 和 query 方式配合使用，可以暴露的參數顯示在 url 上，同時刷新參數也不會丟失。
   銷毀頁面的時候把 localStorage 存儲的內容清除。

// router.js
{
  path: "paramsMode/:aka",
  name: "paramsMode",
  component: ParamsMode
}

GPU云服務器云服務器頁面傳遞參數 html參數傳遞參數參數傳遞對象參數傳遞

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105429.html

新手使用vue-router傳參時注意事項

摘要：使用和組合傳參路由配置獲取參數刷新參數丟失顯示注意此方法第一次跳轉是沒有問題的，參數也可以傳過去，但是刷新頁面后，參數就沒了這個地方其實還有一個問題，當你傳遞的參數是類型，第一次是沒有問題的，獲取的時候也是類型，但是當你刷新頁面后，變成類 1. 使用name和params組合傳參 this.$router.push({name: details, params: {id: 233}})...

microcosm1994 2019-08-02 15:14 評論0 收藏0
新手使用vue-router傳參時注意事項

摘要：使用和組合傳參路由配置獲取參數刷新參數丟失顯示注意此方法第一次跳轉是沒有問題的，參數也可以傳過去，但是刷新頁面后，參數就沒了這個地方其實還有一個問題，當你傳遞的參數是類型，第一次是沒有問題的，獲取的時候也是類型，但是當你刷新頁面后，變成類 1. 使用name和params組合傳參 this.$router.push({name: details, params: {id: 233}})...

clasnake 2019-08-23 17:58 評論0 收藏0
vue 模仿今日頭條demo

vue 頭條 demo 寫在前面總結一下寫 demo 過程中遇到的一些問題，方便自己的學習總結！如有錯誤，還請指正！一直想學習使用 vue ，并準備以后在實際項目使用，之前跟著慕課網黃軼老師敲了一下餓了么商品購買頁的demoele效果預覽該 demo 借鑒自 hcy1996-github 這個項目，但內部內容，布局風格，完全不同，只為共同學習，共同交流數據接口直接打開今日...

simpleapples 2019-08-21 12:03 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

Tecode 2019-08-23 16:02 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

APICloud 2019-08-02 14:34 評論0 收藏0