如果大家觉得有用,更多的模块请 点击查看
vue router给我们提供了两种页面间传递参数的方式:
// 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})
下面介绍一下 vue-viewplus 一个简化Vue应用开发的工具库 中的参数栈模块params-stack.js:
该插件为Vue实例提供了一个 $vp 属性,模块提供了一系列api,来做自己的页面参数方式:
// 跳转页面,并传递参数 this.$vp.psPageNext('/Demo/PageStack/Page2', { params: { phoneNumb: '15111111111' } })
这一点和vue router给我们提供的传递方式类似,并且目前还不支持 query: { plan: 'private' } 传递url参数,但是我们为什么还要做这个模块:
并且,当前模块提供的参数传递方式,和vue router给我们提供了两种页面间传递参数的方式, 并不冲突 ,可以互补使用。
只不过目前插件的参数栈并没有管理vue router帮我们传递的参数;
vuex state 参数栈存储示例:
session storage 参数栈二级存储示例:
示例
模拟一个简单表单提交流程
图 详见源码 example 项目中当前模块示例
表单录入页面(简称:Page1)
<template> <group title="模拟手机号充值 - 堆栈底-第一页" label-width="5em" class="bottom-group"> <box gap="10px 10px"> <x-input title="手机号" v-model="dataParams.phoneNumb"></x-input> </box> <box gap="10px 10px"> <x-button plain @click.native="submit()">点击充值</x-button> <x-button plain @click.native="modify()">修改参数栈内参数对象</x-button> </box> </group> </template> <script type="text/ecmascript-6"> import demoMixin from '../demo-mixin' import { XInput } from 'vux' // 1.参数栈模块提供的一个**混入**组件,方便页面组件简化参数栈的api操作和开发,详见下面的`paramsStack mixin`说明 import { paramsStack } from 'vue-viewplus' export default { // 2.使用`paramsStack mixin` mixins: [paramsStack, demoMixin], components: { XInput }, data() { return { // 3.【可选】`paramsStack mixin`中定义的`data`属性,声明当前页面组件是参数栈的栈底,当当前页面被点击返回弹出的时候,插件会检测这个属性,如果为true,就清空参数栈 // isStackBottom: true, // 4.自定义需要传递到下一个页面的参数 dataParams: { phoneNumb: '' } } }, methods: { submit() { this.$vp.psPageNext('/Demo/PageStack/Page2', { params: this.dataParams }) } }, created() { // 【可选】类似第三步 // this.isStackBottom = true // 5.解析回传参数 if (!_.isEmpty(this.backParams)) { this.dataParams.phoneNumb = this.backParams.phoneNumb this.$vp.toast(`通过 backParams.phoneNumb 预填写页面`) } } } </script> 表单确认页面(简称:Page2) <template> <group label-width="15em" class="bottom-group"> <form-preview header-label="请确认订单信息" :body-items="list" ></form-preview> <x-input title="请输出充值金额" v-model="dataParams.amount" style="margin-top: 10px"></x-input> <box gap="10px 10px"> <flexbox> <flexbox-item> <x-button type="default" @click.native="replace()">确认</x-button> </flexbox-item> <flexbox-item> <x-button type="default" @click.native="bck()">返回(回传参数)</x-button> </flexbox-item> </flexbox> </box> </group> </template> <script type="text/ecmascript-6"> import demoMixin from '../demo-mixin' import { paramsStack } from 'vue-viewplus' import { XInput, FormPreview, Flexbox, FlexboxItem } from 'vux' export default { mixins: [paramsStack, demoMixin], components: { FormPreview, Flexbox, FlexboxItem, XInput }, data() { return { // 1. 回显上一个页面录入的手机号 list: [ { label: '手机号', value: '' } ], // 2. 自定义需要传递到下一个页面的参数 dataParams: { phoneNumb: '', amount: '50元' } } }, methods: { /** * 4.提交表单方式1 * 如果需要下一个页面点击返回,任然要回显当前页面,就调用该方法 * / next() { this.$vp.psPageNext('/Demo/PageStack/Page4', { params: this.dataParams }) }, /** * 4.提交表单方式2 * 一般确认页面都无需被“保留”,故这里使用`this.$vp.psPageReplace`接口完成跳转,底层将会使用 * `router.replace({location})`完成跳转 */ replace() { this.$vp.psPageReplace('/Demo/PageStack/Page4', {params: this.dataParams}) }, bck() { this.$vp.psPageGoBack({ // 3.设置回传参数 backParams: { phoneNumb: '13222222222' } }) } }, created() { this.list[0].value = this.params.phoneNumb this.dataParams.phoneNumb = this.params.phoneNumb } } </script> 表单结果页面(简称:Page4) <template> <div> <msg title="操作成功" :description="description" :buttons="buttons"></msg> </div> </template> <script type="text/ecmascript-6"> import demoMixin from '../demo-mixin' import { paramsStack } from 'vue-viewplus' import { FormPreview, Msg } from 'vux' export default { mixins: [paramsStack, demoMixin], components: { FormPreview, Msg }, data() { return { description: '', buttons: [{ type: 'primary', text: '在做一笔', onClick: ((that) => { return () => { // 返回栈顶页面 that.$vp.psPageGoBack() } })(this) }, { type: 'default', text: '完成', onClick: ((that) => { return () => { // 返回指定页面,并清空参数栈 // that.$vp.psPageGoBack({ // backPopPageNumbs: -2, // clearParamsStack: true // }) that.$vp.psPageNext('/Demo', { clearParamsStack: true, backState: true }) } })(this) }] } }, created() { this.description = `${this.params.phoneNumb} 成功充值 ${this.params.amount}` } } </script>
paramsStack mixin
以上3个页面都集成了 paramsStack mixin ,定义如下:
/** * 参数栈mixin对象 * <p> * 方便页面组件继承之后操作参数栈 * @type {Object} */ export const paramsStackMixin = { data() { return { /** * 声明该页面是栈底部 */ isStackBottom: false } }, computed: { ...mapGetters([ /** * 查看`vuex#vplus.paramsStack[top-length]`栈顶参数 */ 'params' ]), /** * 查看`vuex#vplus.backParams`回传参数 */ backParams() { return this.$store.state[MODULE_NAME].backParams }, /** * 查看`vuex#vplus.backState`是否是出栈|是否是返回状态 */ backState() { return this.$store.state[MODULE_NAME].backState } }, methods: { ...mapMutations([ /** * 入栈 */ 'pushParams', /** * 修改栈顶参数 */ 'modifyParams', /** * 出栈 */ 'popParams', /** * 清空参数栈 */ 'clearParamsStack', /** * 设置是否是出栈|是否是返回状态(点击返回页面) */ 'setBackState' ]) }, // 导航离开该组件的对应路由时调用 beforeRouteLeave(to, from, next) { if (this.backState && this.isStackBottom) { this.clearParamsStack() } next() } }
配置
没有个性化配置,可以查看全局通用配置
API接口
restoreParamsStack
/** * $vp.restoreParamsStack() * 恢复插件中`vuex#$vp.paramsStack` && vuex#$vp.backParams` && vuex#$vp.backState`参数栈所用状态 * <p> * 在当前模块重新安装的时候,一般对应就是插件初始化和页面刷新的时候 */ restoreParamsStack()
psModifyBackState
/** * $vp.psModifyBackState(bckState) * <p> * 设置`vuex#vplus.backState`返回状态 * @param {Boolean} [backState=false] */ psModifyBackState(bckState)
psClearParamsStack
/** * $vp.psClearParamsStack() * <p> * 清空参数栈 */ psClearParamsStack()
psPageNext
/** * $vp.(location[, {params = {}, clearParamsStack = false, backState = false} = {}]) * <p> * 页面导航 * @param location router location对象 * @param {Object} [params={}] 向下一个页面需要传递的参数 * @param {Boolean} [clearParamsStack=false] 在进行页面导航的时候,是否清空参数栈,默认为false * @param {Boolean} [backState=false] 设置`vuex#vplus.backState`返回状态,默认为false */ psPageNext(location, {params = {}, clearParamsStack = false, backState = false} = {})
psPageReplace
/** * $vp.(location[, {params = {}, isPop = true} = {}]) * <p> * 页面导航(基于Router),移除上一个页面 * <p> * 将会出栈顶对象,并重新设置`params`为参数栈的栈顶参数 * 注:在调用该方法的页面,必须是要调用`ParamsStack#psPageNext`导航的页面,因为需要保证“弹栈”操作无误, * 又或者设置`isPop`为false * @param location router location对象 * @param {Object} [params={}] 向下一个页面需要传递的参数 * @param {Boolean} [isPop=false] 是否pop当前页面的参数后在进行页面跳转,默认为true,防止当前页面 * 不是通过`ParamsStack#psPageNext`导航过来的,但是由需要使用当前方法 */ psPageReplace(location, {params = {}, isPop = true} = {})
psPageGoBack
/** * $vp.psPageGoBack({backParams = {}, clearParamsStack = false, backPopPageNumbs = -1} = {}) * <p> * 页面回退 * @param {Object} backParams 设置回传参数 * @param {Boolean} clearParamsStack 是否清空参数栈 * @param {Number} backPopPageNumbs 出栈页面数 */ psPageGoBack({backParams = {}, clearParamsStack = false, backPopPageNumbs = -1} = {})
本文向大家介绍Flutter实现页面切换后保持原页面状态的3种方法,包括了Flutter实现页面切换后保持原页面状态的3种方法的使用技巧和注意事项,需要的朋友参考一下 前言: 在Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState中打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,并且带来了不好的用户体验。 在正
本文向大家介绍vue单页应用在页面刷新时保留状态数据的方法,包括了vue单页应用在页面刷新时保留状态数据的方法的使用技巧和注意事项,需要的朋友参考一下 在Vue单页应用中,如果在某一个具体路由的具体页面下点击刷新,那么刷新后,页面的状态信息可能就会丢失掉。这时候应该怎么处理呢?如果你也有这个疑惑,这篇文章或许能够帮助到你 一、问题 现在产品上有个需求:单页应用走到某个具体的页面,然后点击刷新后,刷
本文向大家介绍PHP页面间传递值和保持值的方法,包括了PHP页面间传递值和保持值的方法的使用技巧和注意事项,需要的朋友参考一下 一、目录结构 二、两次页面间传递值 在两次页面之间传递少量数据,可以使用get提交,也可以使用post提交,二者的区别恕不赘述。 1、get提交 使用get提交来传递数据,在链接地址中修改发送到服务器的 URL 如下所示http://www.cnblogs.c
本文向大家介绍使用vue-router在Vue页面之间传递数据的方法,包括了使用vue-router在Vue页面之间传递数据的方法的使用技巧和注意事项,需要的朋友参考一下 前言 几周前,我写了关于 Vue 路由的使用和在 Vue 页面导航的文章。这是在应用程序中探索的一个基本例子。 通常,在将导航构建到应用程序中时,您会发现需要将数据从一个页面传递到另一个页面。(不通顺)例如,您遵循 master
本文向大家介绍ThinkPHP让分页保持搜索状态的方法,包括了ThinkPHP让分页保持搜索状态的方法的使用技巧和注意事项,需要的朋友参考一下 对很多使用ThinkPHP框架的人来说,使用自动自带的增删改查基类,在分页的时候要保持结果页面的搜索状态,但是使用thinkphp手册中的方案却无法奏效。 ThinkPHP手册中的解决方法是: 直接粘贴过来不能用,经过调试会发现,当$map不是一个数组的时
问题内容: 我正在尝试在应用程序的结帐过程中在页面之间传递数据,但是它无法正常工作。我已经读了一些书,大多数人建议使用服务,但是唯一的问题是,刷新页面(用户单击刷新或稍后再返回)时,该服务中的所有数据都会消失。这是有道理的,因为服务中的数据并不是永久性的,而是会引起问题。 所以问题是:如何在angularJS中的页面之间传递数据,并且仍然保持页面刷新后传递的数据? 到目前为止,这是我的代码(尝试使