[zero foundation uniapp series] 5. Add a new page

Create a new page in HBuilderX. The steps to create a new page are as follows:

You can right-click a project or a folder and select new page
Enter the project name and the template used by the project
Select whether to register in pages.json. Note: all pages that need to be displayed separately must be registered here, otherwise they cannot be displayed.

All used pages need to be registered in pages.json

In the program, if multiple pages need to jump to each other, you can use the following commands:

uni.navigateTo

Keep the current page, jump to a page in the application, and use uni.navigateBack to return to the original page.

object parameter description:

parameter	type	Required	Default value	explain	platform

Example: there are two ways to jump to a new page and pass parameters:

1. Use the url method for delivery. Note: the url has a length limit. If the string is too long, it will fail to pass. In addition, when special characters such as spaces appear in the parameters, the parameters need to be encoded (please refer to the description in the web page here)

//Jump to the newpage.vue page at the start page and pass the parameters
uni.navigateTo({
    url: "../index2/index2?id=1&name=Zhang San"
});
<template>
    <view>
        I am a new page index2，Parameters I received:
        <view>id:{{id}}</view>
        <view>name:{{name}}</view>
    </view>
</template>

<script>
    export default {
        onLoad( option ) {
            this.id = option.id;
            this.name = option.name;
        },
        data() {
            return {
                id: 0,
                name: ''
            }
        },
    }
</script>

2. Pass using event events

<!-- index.vue -->
<script>
uni.navigateTo( {
    url: "../index3/index3",
    events: {
        page_index_receive( data ) {
            console.log( "index.vue Received data(from index3.vue Sent it): ", data );
        }
    },
    success( res ) {
       res.eventChannel.emit( 'page_index3_receive', {
            id: 2,
            name: "Li Si"
       } );
    }
})
</script>
<!-- index3.vue -->
<template>
    <view>
        I am a new page index3，Parameters I received:
        <view>id:{{id}}</view>
        <view>name:{{name}}</view>
    </view>
</template>

<script>
    export default {
        onLoad( option ) {
            const enventchannel = this.getOpenerEventChannel();
            enventchannel.emit( 'page_index_receive', {
                id: 1,
                name: 'Zhang San'
            } );

            enventchannel.on( 'page_index3_receive', ( data ) => {
                this.id = data.id;
                this.name = data.name;
            } )

        },
        data() {
            return {
                id: 0,
                name: ''
            }
        },
    }
</script>

be careful:

The page Jump path has hierarchical restrictions. You cannot jump to a new page without restrictions
Jump to tabBar page can only be used switchTab Jump
The target page of the routing API must be a vue page registered in pages.json. If you want to open the web url, you can use it on the App platform plus.runtime.openURL Or web view component; H5 platform uses window.open; The applet platform uses the web view component (the url needs to be in the applet's online white list). In the Hello uni app, a component ulink.vue has encapsulated multiple terminals, which can be used for reference.
APP-NVUE platform does not support obtaining eventChannel by this. Getopenerteventchannel(). Please use this.$scope.eventChannel instead. Please refer to the above example for specific methods.

uni.navigateBack

Close the current page and return to the previous page or multi-level page. Can pass getCurrentPages() Get the current page stack and decide how many layers to return.

OBJECT parameter description

parameter	type	Required	Default value	explain	Platform difference description

// Note: when calling navigateTo jump, the page calling this method will be added to the stack, while the redirectTo method will not. See the example code below

// This is page A
uni.navigateTo({
    url: 'B?id=1'
});

// This is page B
uni.navigateTo({
    url: 'C?id=1'
});

// navigateBack in page C will return to page A
uni.navigateBack({
    delta: 2
});

uni.redirectTo

Close the current page and jump to a page in the application.

Parameters can only be used: url,success,fail,complete

uni.reLaunch

Close all pages and open to a page in the application.

be careful: If called uni.preloadPage(OBJECT) Does not close, only triggers the lifecycle onHide

After calling uni.reLaunch on the H5 side, the previous page stack will be destroyed, but the history before the browser cannot be cleared. At this time, the navigateBack cannot return. If there is a history, click the return button of the browser or call history.back() to navigate to other history records of the browser.