vue頁面params傳值的坑及解決

Posted on 2023-05-17 by WalkonNet

vue頁面params傳值的坑

a.vue向b.vue傳值

a.vue

this.$router.push({
    path: '/payType',
    query: {
        putUpList: this.putUpList,
        name:'111'
    },
    params:{
        cartList: this.cartList,
        totalMoney: this.totalMoney
    }
});

b.vue

mounted:function(){
    console.log(this.$route.params)
    console.log(this.$route.query)
}

坑來瞭~

query可以拿到，params拿不到

需要在註冊路由的地方給路由加上name參數

const router = new VueRouter({
    routes:[{
        ...
    },{
        path:'/payType',
        name:'inputComp',
        component: payType
    }]
})

a.vue跳轉路由的地方同樣加上name參數，b.vue就可以拿到params瞭

this.$router.push({
    path: '/payType',
    name: 'inputComp',
    query: {
        putUpList: this.putUpList,
        name:'111'
    },
    params:{//一定要設置name，才可以傳params
        cartList: this.cartList,
        totalMoney:this.totalMoney
    }
});

vue跨頁面傳值的精妙

眾所周知，以前開發者隻要掌握HTML、CSS、JavaScript 三駕馬車就能勝任一份Web前端的工作。而在技術日新月異的現在，Vue, React，Angular在代替舊的前端框架已經是大勢所趨瞭。

vue簡介

Vue是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫隻關註視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。

是一個興起的前端js庫，是一個精簡的MVVM。從技術角度講，Vue.js 專註於 MVVM 模型的 ViewModel 層。它通過雙向數據綁定把 View 層和 Model 層連接瞭起來，通過對數據的操作就可以完成對頁面視圖的渲染。

與ajax比較

vue本身不支持ajax請求，需要借助vue-resource,axios插件。vue2官方推薦axios,是一個基於Promise的HTTP請求客戶端，不再對vue-resource進行維護和更新。

axios([options])  
axios.get(url[,options]);

傳參方式：

通過url傳參
通過params選項傳參

axios.post(url,data,[options]);

axios默認發送數據時，數據格式是Request Payload，並非我們常用的Form Data格式，所以參數必須要以鍵值對形式傳遞，不能以json形式傳參

傳參方式：

自己拼接為鍵值對
使用transformRequest，在請求發送前將請求數據進行轉換
如果使用模塊化開發，可以使用qs模塊進行轉換

axios本身並不支持發送跨域的請求，沒有提供相應的API，作者也暫沒計劃在axios添加支持發送跨域請求，所以隻能使用第三方庫

ajax傳參格式

ajax是jquery封裝的一個前端方法，通過請求後臺API接口方式，用以局部刷新和動態展示頁面。

$.ajax({
    url: "http://localhost:8082/boot/request/parameter",
    type: "post",
    contentType: "application/json;charset=utf-8",
    data: JSON.stringify({name: "aaa", foo: ["bar1", "bar2"]}),
    success: function (json) {
        console.log(json);
    }
});

vue傳參格式

場景：點擊父頁面的XX查詢按鈕，彈出子頁面queryView，父頁面選中的某行記錄值傳到子頁面中，子頁面請求後臺Api關聯查詢並展示父頁面選中記錄對應的明細記錄。

在父頁面定義方法query()
const rows為父頁面查詢列表選中的某行記錄
queryView為子頁面
params 為定義的傳值對象
callback 回調方法

query() {
      let title = "XX查詢"
      const rows = this.$refs.multipleTable.selection;
      this.$dialog.modal(queryView, {
        title: title,
        width: 1200,
        height: 600,
        params: {domain: Object.assign({}, rows[0])},
        callback: data=> {
          if(data.flag == true)
            this.queryData()
        }
      });
    }

子頁面中定義接收參數對象，接收參數對象有3種格式：變量、對象、常量

這裡定義為對象 Object

props:{
    domain: {
      type: Object,
      default: function() {}
    }
  }

調用後臺api接口關聯查詢並展示

params 定義方法中變量，獲取從父頁面接收的對象中的屬性值
this.operat4Data(XXApi.getList, params, null, null); 調用後臺api接口及傳參

queryData() {
      let params = {apiParams:this.domain.apiParams};
      let respData =  this.operat4Data(XXApi.getList, params, null, null);
      respData.then( data => {
        this.dataList = data.posts;
        this.total = data.count;
      });
    }

vue的優勢

vue因其極具方便靈活易用等特性，為廣大前端開發者所推崇和使用。

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

vue頁面params傳值的坑及解決

目錄