300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > vux 页面参数传递

vux 页面参数传递

时间:2024-04-06 06:30:09

相关推荐

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.$mit('SET_ORDER', order)// SET_ORDER为order值的设置方法的方法名

// 5.获取全局的order值// 从vuex中获取orderlet template = this.$store.state.order

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。