【零基础学会uniapp系列】5、添加新的页面 page - 精易论坛

5、添加新的页面 page，并且使用命令进行跳转

在HBuilderX中新建一个页面，新建页面的步骤：

可直接从项目上右键或者从某个文件夹上面右键，选择新建页面

输入项目名称和项目使用的模板

选择是否在pages.json中进行注册，注意：所有需要单独显示的页面，都必须在这里进行注册，否则无法显示。

所有用到的页面都需要在pages.json中进行注册

在程序中，如果有多个页面需要互相跳转，则可以使用下面的几个命令来实现：

uni.navigateTo

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

object参数说明：

参数	类型	必填	默认值	说明	平台
url	String	是		需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数
animationType	String	否	pop-in	窗口显示的动画效果，详见：窗口动画	App
animationDuration	Number	否	300	窗口动画持续时间，单位为 ms	App
events	Object	否		页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。
success	Function	否		接口调用成功的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

示例：跳转到新页面并且传递参数，有两种方法：

1、使用url方式进行传递。注意：url有长度限制，太长的字符串会传递失败，另外参数中出现空格等特殊字符时需要对参数进行编码（此处请参考网页中说明）

//在起始页面跳转到newpage.vue页面并传递参数

uni.navigateTo({

    url: "../index2/index2?id=1&name=张三"

});

<template>

    <view>

        我是一个新的页面index2，我收到的参数：

        <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、使用event事件进行传递

<!-- index.vue -->

<script>

uni.navigateTo( {

    url: "../index3/index3",

    events: {

        page_index_receive( data ) {

            console.log( "index.vue 收到的data(由index3.vue发过来的): ", data );

        }

    },

    success( res ) {

       res.eventChannel.emit( 'page_index3_receive', {

            id: 2,

            name: "李四"

       } );

    }

})

</script>

<!-- index3.vue -->

<template>

    <view>

        我是一个新的页面 index3，我收到的参数：

        <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: '张三'

            } );



            enventchannel.on( 'page_index3_receive', ( data ) => {

                this.id = data.id;

                this.name = data.name;

            } )



        },

        data() {

            return {

                id: 0,

                name: ''

            }

        },

    }

</script>

注意：

页面跳转路径有层级限制，不能无限制跳转新页面

跳转到 tabBar 页面只能使用 switchTab 跳转

路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web url，在App平台可以使用 plus.runtime.openURL或web-view组件；H5平台使用 window.open；小程序平台使用web-view组件（url需在小程序的联网白名单中）。在hello uni-app中有个组件ulink.vue已对多端进行封装，可参考。

APP-NVUE平台暂不支持以this.getOpenerEventChannel()方式获取eventChannel，请换用this.$scope.eventChannel来获取，具体方式请参考上述示例。

uni.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

OBJECT参数说明

参数	类型	必填	默认值	说明	平台差异说明
delta	Number	否	1	返回的页面数，如果 delta 大于现有页面数，则返回到首页。
animationType	String	否	pop-out	窗口关闭的动画效果，详见：窗口动画	App
animationDuration	Number	否	300	窗口关闭动画的持续时间，单位为 ms	App

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码



// 此处是A页面

uni.navigateTo({

    url: 'B?id=1'

});



// 此处是B页面

uni.navigateTo({

    url: 'C?id=1'

});



// 在C页面内 navigateBack，将返回A页面

uni.navigateBack({

    delta: 2

});

uni.redirectTo

关闭当前页面，跳转到应用内的某个页面。

参数仅可使用：url,success,fail,complete

uni.reLaunch

关闭所有页面，打开到应用内的某个页面。

注意： 如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

H5端调用uni.reLaunch之后之前页面栈会销毁，但是无法清空浏览器之前的历史记录，此时navigateBack不能返回，如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录。

uni.preloadPage

仅支持App-nvue、H5

本课引用链接：

https://uniapp.dcloud.io/api/router?id=navigateto

https://uniapp.dcloud.io/api/router?id=redirectto

https://uniapp.dcloud.io/api/router?id=relaunch

https://uniapp.dcloud.io/api/router?id=navigateback

https://uniapp.dcloud.io/api/preload-page

https://uniapp.dcloud.io/api/router?id=animation

https://uniapp.dcloud.io/collocation/pages?id=pages

home.php?mod=space&uid=70631 课件下载、更多教程、遇到问题或者进行交流，请到： https://125.confly.eu.org/forum.php?mod=forumdisplay&fid=226 进行发帖交流

加QQ群：326576256

精易论坛