uni-app page jump to pass parameters

uni-app page jump to pass parameters

<navigator>

First, let's take a look at the introduction given by the official website:

Introduction to the official website of navigator

Page jump.

This component is similar to the <a> component in HTML, but can only jump to local pages. The target page must be registered in pages.json.

The function of this component has API methods, see also: https://uniapp.dcloud.io/api/router?id=navigateto(opens new window)

Property description

property name type Defaults illustrate Platform Difference Description
url String The jump link in the application, the value is a relative path or an absolute path, such as: "../first/first", "/pages/first/first", be careful not to add .vue suffix
open-type String navigate Jump method
delta Number Valid when open-type is 'navigateBack', indicating the number of layers to back off
animation-type String pop-in/out It is valid when open-type is navigate, navigateBack, the display/close animation effect of the window, see: window animation App
animation-duration Number 300 Valid when open-type is navigate, navigateBack, the duration of the window display/close animation. App
hover-class String navigator-hover Specify the style class when clicked. When hover-class="none", there is no click state effect
hover-stop-propagation Boolean false Specifies whether to prevent the ancestor node of this node from appearing in the click state WeChat applet
hover-start-time Number 50 How long for the click state to appear after holding down, in milliseconds
hover-stay-time Number 600 Click state retention time after the finger is released, in milliseconds
target String self On which mini-program target the jump occurs, the default is the current mini-program, and the value range is self/miniProgram WeChat 2.0.7+, Baidu 2.5.2+, QQ

open-type valid values

value illustrate Platform Difference Description
navigate Function corresponding to uni.navigateTo
redirect Function corresponding to uni.redirectTo
switchTab Function corresponding to uni.switchTab
reLaunch Function corresponding to uni.reLaunch ByteDance applet and Feishu applet are not supported
navigateBack Function corresponding to uni.navigateBack
exit Exit the Mini Program, it will take effect when target="miniProgram" WeChat 2.1.0+, Baidu 2.5.2+, QQ1.4.7+

Notice

  • To jump to the tabbar page, you must set open-type="switchTab"
  • navigator-hover defaults to {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, the background color of the child nodes of <navigator> should be transparent.
  • navigator-open-type attribute If the corresponding value is used, the function of the corresponding value will be higher than the corresponding jump path.
  • The app-nvue platform supports <navigator> only for pure nvue projects (render is native). When the non-render is native, nvue does not support the navigator component, please use the API to jump.
  • Exit the application under the app, the Android platform can use plus.runtime.quit (opens new window) . iOS has no concept of exiting an app.
  • uLink Components (opens new window) It is an enhanced version of the navigator component, with an underline on the style, and functionally supports opening online web pages, schema s of other apps, mailto sending emails, and tel calling.

case

fm is an array, which stores several objects, each object is a form information, so to display all the form information, use v-for to traverse all the form information. However, it is necessary to design each form to be able to jump and display the details of the form; so when the page is jumped, the information of the form must be delivered to the new page. Pass the primary key of the form to the new page, and then query it from the interface.

Why not just pass all the information straight through?

Because URL writing has a length limit! ! ! ! !

<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;">Application number:</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;">Date of Application:</text>
            <text style="font-size: 15px;">{{ item.apply_date }}</text>
        </view>
    </view>
    <!-- document status -->
    <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>

details as follows:

<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>

The writing method is consistent with the writing method given by the official website, but the compiler will report an error, but the program can still be compiled normally.

The error is as follows:

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;">Application number:</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

In order to prevent the compiler from reporting an error, it can be written as follows;

<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>

Tags: Mini Program Vue uniapp

Posted by RobertSubnet on Sat, 03 Sep 2022 06:02:56 +0530