uni-app页面跳转传递参数

uni-app页面跳转传递参数

首先来看看官网给的介绍:

页面跳转。

该组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册。

该组件的功能有API方式,另见:https://uniapp.dcloud.io/api/router?id=navigateto(opens new window)

属性说明

属性名 类型 默认值 说明 平台差异说明
url String 应用内的跳转链接,值为相对路径或绝对路径,如:"../first/first","/pages/first/first",注意不能加 .vue 后缀
open-type String navigate 跳转方式
delta Number 当 open-type 为 'navigateBack' 时有效,表示回退的层数
animation-type String pop-in/out 当 open-type 为 navigate、navigateBack 时有效,窗口的显示/关闭动画效果,详见:窗口动画 App
animation-duration Number 300 当 open-type 为 navigate、navigateBack 时有效,窗口显示/关闭动画的持续时间。 App
hover-class String navigator-hover 指定点击时的样式类,当hover-class="none"时,没有点击态效果
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态 微信小程序
hover-start-time Number 50 按住后多久出现点击态,单位毫秒
hover-stay-time Number 600 手指松开后点击态保留时间,单位毫秒
target String self 在哪个小程序目标上发生跳转,默认当前小程序,值域self/miniProgram 微信2.0.7+、百度2.5.2+、QQ

open-type 有效值

说明 平台差异说明
navigate 对应 uni.navigateTo 的功能
redirect 对应 uni.redirectTo 的功能
switchTab 对应 uni.switchTab 的功能
reLaunch 对应 uni.reLaunch 的功能 字节跳动小程序与飞书小程序不支持
navigateBack 对应 uni.navigateBack 的功能
exit 退出小程序,target="miniProgram"时生效 微信2.1.0+、百度2.5.2+、QQ1.4.7+

注意

  • 跳转tabbar页面,必须设置open-type="switchTab"
  • navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator> 的子节点背景色应为透明色。
  • navigator-open-type属性 如果使用对应的值,则对应值的功能会高于对应跳转路径。
  • app-nvue 平台只有纯nvue项目(render为native)才支持 <navigator>。非render为native的情况下,nvue暂不支持navigator组件,请使用API跳转。
  • app下退出应用,Android平台可以使用plus.runtime.quit (opens new window)。iOS没有退出应用的概念。
  • uLink组件 (opens new window)是navigator组件的增强版,样式上自带下划线,功能上支持打开在线网页、其他App的schema、mailto发邮件、tel打电话。

案例

遍历数组,带上选中的一条中的数据进行跳转

这种写法好像只有微信开发者工具支持,APP和其它平台不支持
应用场景,订单列表跳转,单据列表点击跳转

fm是一个数组,里面存放的是数个对象,每一个对象就是一个表单信息,所以要展示所有表单信息,就用v-for将所有表单信息都遍历出来。但是又要设计每个表单都可以实现跳转,展示表单详情;所以页面跳转时就要专递该表单的信息到新页面。传递该表单的主键到新页面,再由接口出查询。

为什么不直接将所有信息直接传递过去呢?

因为URL写法有长度限制!!!!!

<view style="margin-left: 20px; margin-bottom: 10px;" class="body2" v-for="(item,index) in fm">
    <view style="padding: 10px; float: left; width: 70%; height: 100%;">
        <view style="height: 50%;" class="item">
            <text style="font-weight:bold; font-size: 18px;">申请单编号:</text>
            <navigator :url="'./ApplyDetails?bill_code={{item.pk_hi_stapply}}'" hover-class="navigator-hover" >
            <text style="font-size: 15px; font-weight:600;">{{ item.bill_code }}</text>
            </navigator>
        </view>
        <view style="height: 50%;" class="item">
            <text style="font-weight:bold; font-size: 18px;">申请日期:</text>
            <text style="font-size: 15px;">{{ item.apply_date }}</text>
        </view>
    </view>
    <!-- 单据状态 -->
    <view class="item flex" style=" align-items: center; justify-content: center; float: right; width: 30%; height: 100%;">
        <text style="font-weight:bold; font-size: 18px;">{{ item.approve_state }}</text>
    </view>
</view>

具体如下:

<navigator url="./ApplyDetails?bill_code={{item.pk_hi_stapply}}" hover-class="navigator-hover" >
    <text style="font-size: 15px; font-weight:600;">{{ item.bill_code }}</text>
</navigator>

写法上跟官网给的写法一致,可是编译器会报错,但是程序依旧可以正常编译出来。

错误如下:

16:29:04.096 Module Error (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js):
16:29:04.097 (Emitted value instead of an instance of Error) 
16:29:04.102   Errors compiling template:
16:29:04.103   url="./ApplyDetails?bill_code={{item.bill_code}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
16:29:04.117   115|  					<view style="height: 50%;" class="item">
16:29:04.125   116|  						<text style="font-weight:bold; font-size: 18px;">申请单编号:</text>
16:29:04.126   117|  						<navigator url="./ApplyDetails?bill_code={{item.bill_code}}" hover-class="navigator-hover" >
16:29:04.134      |                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
16:29:04.136   118|  						<text style="font-size: 15px; font-weight:600;">{{ item.bill_code }}</text>
16:29:04.158   119|  						</navigator>
16:29:04.162  at E:\SOS\SOS.BGAPP\pages\DHR\DimissionApply.vue:0

为了不让编译器报错,写法可以如下;

<navigator :url="'./ApplyDetails?bill_code={{item.pk_hi_stapply}}'" hover-class="navigator-hover" >
    <text style="font-size: 15px; font-weight:600;">{{ item.bill_code }}</text>
</navigator>

补充

带上当前页面的多条数据进行跳转

以上方法仅适用于遍历数组,传递该数组的数据时使用。

如果想传递页面中的其它数据,甚至是多条数据,就需要使用,官方文档中的方法

uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

将其进行一个简单封装,比如:

navdata(){
    uni.navigateTo({
        url: 'test?id=1&name=uniapp'
    });
}

但是这种方法传递的是固定的值,而不是变量。在接收页面输出会输出为

export default {
	onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}

//打印结果为
//1
//uniapp

如果想传递变量可以使用如下方法:detalis()为点击事件 放入method中;

比较重要的是,URL只能传递字符串,如果是对象或者是数组,就需要先将其转换为字符串再进行传递

    navData(){
        var navdata = {
            workno : this.workno,
            pk_hi_stapply : this.pk_hi_stapply
        }
        this.navdata = navdata;
    },
    details(){
        this.navData();
        var mynavdata = JSON.stringify(this.navdata)
        uni.navigateTo({
            url:"./test?data="+mynavdata,
        })
    }

接收端这样写:将接收到的JSON字符串转换为对象

export default {
    onLoad(option) {

        _self = this;
        var navdata = JSON.parse(option.data)
        _self.workno = navdata.workno;
        _self.pk_hi_stapply = navdata.pk_hi_stapply;

    },
}

然后在需要跳转的view中添加该方法的点击事件进行调用

<view @onclik="details()">
    
</view>
posted @ 2022-09-03 10:14  苏槿年  阅读(2587)  评论(0编辑  收藏  举报