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

open-type valid values

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>