1. 程式人生 > >vux 頁面引數傳遞

vux 頁面引數傳遞

ux跳轉到指定介面 

this.$router.push({ path: url });

返回上一層 

this.$router.go(-1);

vux介面跳轉傳遞引數

一丶通過name來確定匹配的路由

this.$router.push({ path: '/init/doucfg/search',name:'search',params:{search:value}});

獲取引數方法:      this.$route.params.search;

name: "路由下面定義的name";

params : 上述例子傳遞是一個key為search的值

二丶通過path攜帶的引數

this.$router.push({ path: '/init/myadmexp/details/'+id});

獲取引數方法:    this.$route.params.id;

此方法需要在路由的path中配置   /:id

{
     path: 'myadmexp/details/:id',
     name: 'search',
     component: search

}

三丶通過query來傳遞引數,使用此方法傳遞的引數會出現在url地址中

this.$router.push({ path: '/init/myadmexp/details/',query:{id:code}});

獲取引數方法:      this.$route.query.id;

一.頁面跳轉通過路由帶引數傳遞資料

// 1.頁面中的程式碼
this.$router.push({
    name: 'generalAdminOrderFlowAdd',
    params: {
      type: 'add',
      templateType: this.orderTemplateType
     }
 })
 // 2.路由中的程式碼
 {
   path: ':type/:templateType',
   name: 'generalAdminOrderFlowAdd',
   component:   require('@/components/generalAdmin/order/orderFlow')
}
// 3.獲取頁面中的引數值
 let type = this.$route.params.type

二.使用vuex進行資料傳遞

// 1.index.js頁面程式碼
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(Vuex)
const state = {
  order: {} //宣告order物件
}
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})
//2. getters.js頁面的程式碼
export default {
 // 宣告獲取order的方法
  getOrder (state) {
    return state.order
  }
}
//3. mutation.js頁面的程式碼
export default {
//設定order的值
  SET_ORDER (state, order) {
    state.order = order
  }
// 4.在頁面中設定呼叫set方法設定全域性order的值
this.$store.commit('SET_ORDER', order)// SET_ORDER為order值的設定方法的方法名
// 5.獲取全域性的order值
 // 從vuex中獲取order
let template = this.$store.state.order

相關推薦

vux 頁面引數傳遞

ux跳轉到指定介面  this.$router.push({ path: url }); 返回上一層  this.$router.go(-1); vux介面跳轉傳遞引數 一丶通過name來確定匹配的路由 this.$router.push({ path:

vux 頁面引數傳遞

ux跳轉到指定介面  this.$router.push({ path: url }); 返回上一層  this.$router.go(-1); vux介面跳轉傳遞引數 一丶通過name來確定匹配的路由 this.$router.push({ path: '/in

JSP頁面引數傳遞時型別轉換總結

1、request.getParameter()得到的引數值一律是String型別 2、session.getAttribute()得到的引數是Object型別 這裡的Object型別是對應型別生成

vue頁面引數傳遞的方法總結

目錄   方法一:通過路由帶引數進行傳值 方法二:通過設定 Session Storage/local Storage快取的形式進行傳遞 1、 原生用法使用 2、 對Session Storage/local Storage快取進行統一封裝 方法三:父子元件之間的傳

wx小程式自定義元件與頁面之間引數傳遞

在開發中,很多頁面中會使用相同的元件,這時可以將具有相同資訊的部分封裝成一個元件,方便開發中呼叫。在呼叫中可能會涉及到資料的傳遞問題,例如頁面與元件,元件與元件直接的資料傳遞。 首先看看頁面與元件直接的資料傳遞。     1. 元件需要獲取頁面傳遞資料, 可以使用元件的屬性來傳遞值

頁面間大量資料引數傳遞

前言 我們在開發專案中經常會遇到一種問題,就是在前端頁面跳轉時傳遞某些引數,通常我們是通過路由傳遞的,但是如果資料量很多的情況下,會造成路由非常的長,如果在大的話甚至會超出位址列URL的最大限度,這就狗帶了.最近手頭上一個專案的前端剛好遇到這個問題,該專案前端用的是vue2.x.不是什麼大問題,但是之前沒有認

頁面跳轉間引數傳遞,新頁面接收引數的方法

function query(name) {     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  

AngularJS進階 八 實現頁面跳轉並進行引數傳遞

angularjs實現頁面跳轉並進行引數傳遞 注:請點選此處進行充電! Angular頁面傳參有多種辦法,我在此列舉4種最常見的: 1. 基於ui-router的頁面跳轉傳參 (1) 在AngularJS的app.js中用ui-router定義路由,比如現在

ios頁面傳遞引數四種方式

2、使用檔案,或者NSUserdefault來傳遞 3、通過一個單例的class來傳遞 4、通過Delegate來傳遞。 IOS開發使用委託delegate在不同視窗之間傳遞資料是本文要介紹的內容,主要是來講解如何使用委託delegate在不同視窗之間傳遞資料,具體內容來看詳細內容。在IOS開發裡兩

SpringMVC引數傳遞 使用model完成頁面的回顯

什麼是頁面回顯? 頁面回顯就是將後臺的資料,返回到前端的頁面上。 通過addAttributer將user的屬性新增到model中去 @Controller public class In

android: Web跳轉到app指定頁面傳遞引數

下面將實現 Web跳轉到app指定頁面並傳遞引數 總結 先看效果圖: h5頁面程式碼: <!doctype html> <html> <head> <meta charset="utf-8"> &l

[removed].href 跳轉頁面傳遞引數並且在新頁面接收引數

可以直接使用window.location.href進行頁面跳轉 window.location.href = "./punch/clock_frm.html" 問號傳參: window.location.href = "./punch/clock_frm.html?modF

微信小程式頁面之間傳遞引數的幾種方式

小程式開發過程中,不可避免要遇到不同頁面之間資料通訊的問題,如判斷是否登入等,現做出以下分類總結 一、使用全域性變數實現資料傳遞 使用場景: 購物車介面需要根據是否登入來區別顯示,當沒有登入時提醒去登入,登入後之間顯示自己購物車裡的商品列表

使用a標籤開啟新頁面傳遞引數

使用js的方式可以實現a標籤傳遞引數 <a href="#" onclick="ulrHtml('引數');"> //開啟一個新的頁面並傳遞引數 function

微信小程式詳解——頁面之間的跳轉方式【路由】和引數傳遞

微信小程式擁有web網頁和Application共同的特徵,我們的頁面都不是孤立存在的,而是通過和其他頁面進行互動,來共同完成系統的功能。今天我們來研究小程式頁面之間的跳轉方式。 1.先導 在Android中,我們Activity和Fragmen

GridView實現超連結列和圖片列,跳轉頁面傳遞引數

「注意!請勿私自轉載!」   最近在使用ASP.NET建設網站,需要解決如標題所示的問題,上網可以搜出很多答案。現在簡單總結一下我的解決辦法,方便各位取用,有任何疑問歡迎提出交流。 (注:使用V

HTML頁面跳轉及引數傳遞

HTML頁面跳轉: window.open(url, "", "width=600,height=400"); //第二個引數:_self,在當前視窗開啟視窗;_blank(預設值),在另外的新建視窗開啟新視窗; window.location.href="http:/

mui初步應用(二) 頁面跳轉和引數傳遞問題

繼續申明小白(希望有天可以自信的說是大佬 - -) 網上的各種頁面跳轉和引數傳遞相關文章太多,我就說些自己遇到的吧,沒總結到沒關係,以後慢慢改。。 一、頁面跳轉: 那啥 a標籤跳轉就不用說了吧- - 我還真試了 就是引數不好傳。。 然後選擇了點選事件,主要看裡面的

前端頁面之間傳遞引數

這裡有假如傳遞一個引數,在另一個頁面接收時,只需要js中寫入如下程式碼: localhost:8080/index.jsp?id=1 function showWindowHref() { var sHref = window.location.hr

angularjs實現頁面跳轉並進行引數傳遞

Angular頁面傳參有多種辦法,我在此列舉4種最常見的: 1. 基於ui-router的頁面跳轉傳參 (1) 在AngularJS的app.js中用ui-router定義路由,比如現在有兩個頁面,一個頁面(producers.html)放置了多個producers,點選其