标签：hover 16 app 29 跳转 uni type

uni-app页面跳转传递参数

<navigator>

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

navigator官网介绍

页面跳转。

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

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

属性说明

open-type 有效值

注意

• 跳转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打电话。

案例

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>

标签：hover,16,app,29,跳转,uni,type
来源： https://www.cnblogs.com/wzx-blog/p/16652069.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。