uni-app学习笔记——路由与页面跳转

小颖最近在学习小程序，怕自己前看后忘，毕竟还没开始进入项目实践中，就自己瞎倒腾嘻嘻，今天来看下  uni-app  的路由与页面跳转，小颖就简单列举下它们的用法，具体的大家可以看官网哦！啦啦啦啦啦   啦啦啦啦啦啦    就是想i偷懒嘻嘻

简单总结 uniapp常用跳转API

API	作用
uni.navigateTo	保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
uni.redirectTo	关闭当前页面，跳转到应用内的某个页面。
uni.reLaunch	关闭所有页面，打开到应用内的某个页面。
uni.switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.navigateBack	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

 

参考：uniapp页面跳转的解决方案

官网：路由与页面跳转

路由与页面跳转

uni.navigateTo

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

注意：只能打开非 tabBar 页面。

示例

        // 跳转页面
        openNewPage (data) {
            const { url } = data
            console.log(url + '?id=' + data.id + '&name=' + data.name)
            uni.navigateTo({
                url: (url + '?id=' + data.id + '&name=' + data.name)
            })
        }

    // 在跳转过来的页面的接收参数
    onLoad (option) {
        this.pageData = option
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    },

页面效果

未跳转页面                                                                                   接收参数页面

                                                 

发现

可以看到导航栏有回退按钮。

uni.redirectTo

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

注意：redirectTo 只能打开非 tabBar 页面。

示例

// 跳转页面
        openNewPage (data) {
            const { url } = data
            console.log(url + '?id=' + data.id + '&name=' + data.name)
            uni.redirectTo({
                url: (url + '?id=' + data.id + '&name=' + data.name)
            })
        }

// 在跳转过来的页面的接收参数
    onLoad (option) {
        this.pageData = option
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    },

页面效果

未跳转页面                                                                              接收参数页面

                                                 

发现

没有回退按钮，但有回到主页按钮

uni.reLaunch

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

注意：

• 如果调用了 uni.preloadPage(OBJECT)不会关闭，仅触发生命周期 onHide；
• reLaunch 可以打开任意页面。

示例

        // 跳转页面
        openNewPage (data) {
            const { url } = data
            console.log(url + '?id=' + data.id + '&name=' + data.name)
            uni.reLaunch({
                url: (url + '?id=' + data.id + '&name=' + data.name)
            })
        }

// 在跳转过来的页面的接收参数
    onLoad (option) {
        this.pageData = option
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    },

页面效果

未跳转页面                                                                     接收参数页面

                                              

发现

没有回退按钮，但有回到主页按钮

uni.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

注意：switchTab 只能打开 tabBar 页面。

示例

比如从跳转页面一中，点击按钮，切换当前的   tabBar

<template>
    <view>
        跳转页面1
        <view class="page-box">
            获取的页面信息id：{{pageData.id}},name：{{pageData.name}}
        </view>
        <view>
            <button type="default" @click="changeTabBar" size="mini">跳转到个人中心</button>
        </view>
    </view>
</template>

<script>
export default {
    data () {
        return {
            pageData: {
                id: '',
                name: ''
            }
        }
    },
    // 在跳转过来的页面的接收参数
    onLoad (option) {
        this.pageData = option
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    },
    methods: {
        // 改变当前tabBar 页面
        changeTabBar(){
            uni.switchTab({
                url: '/pages/personalCenter/personalCenter'
            });
        }
    }
}
</script>

<style>

</style>

pages.json

    "tabBar": {
        "color": "#cdd5e2",
        "selectedColor": "#55ABFF",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{
            "pagePath": "pages/index/index",
            "iconPath": "./static/common/homeNo.png",
            "selectedIconPath": "./static/common/home.png",
            "text": "首页"
        }, {
            "pagePath": "pages/personalCenter/personalCenter",
            "iconPath": "./static/common/userNo.png",
            "selectedIconPath": "./static/common/user.png",
            "text": "我的"
        }]
    }

页面效果

 跳转前                                                                                                                    跳转后

                                              

uni.navigateBack

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

注意：仅   uni.navigateTo  调用可返回上一层，uni.redirectTo、uni.reLaunch  调用不起作用，因为都会关闭页面再打开新的

示例

从首页中跳到 跳转页面2

        // 跳转页面
        openNewPage (data) {
            const { url } = data
            console.log(url + '?id=' + data.id + '&name=' + data.name)
            uni.navigateTo({
                url: (url + '?id=' + data.id + '&name=' + data.name)
            })
        }

跳转页面2中，点击   返回上一页  按钮，执行返回上一层

<template>
    <view>
        跳转页面2
        <view>
            <button type="default" @click="backPage" size="mini">返回上一页</button>
        </view>
    </view>
</template>

<script>
export default {
    data () {
        return {

        }
    },
    onLoad (option) {
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    },
    methods: {
        backPage () {
            console.log('22222222')
            uni.navigateBack({
                delta: 1
            });
        }
    }
}
</script>

<style>

</style>

页面效果

                                       

点击   返回上一页  按钮，页面就会回到首页

EventChannel

2.8.9+ 支持 页面间事件通信通道

方法

EventChannel.emit(string eventName, any args)

触发一个事件

string eventName 事件名称

any args 事件参数

EventChannel.off(string eventName, function fn)

取消监听一个事件。给出第二个参数时，只取消给出的监听函数，否则取消所有监听函数

string eventName 事件名称

function fn 事件监听函数

参数 any args 触发事件参数

EventChannel.on(string eventName, function fn)

持续监听一个事件

string eventName 事件名称

function fn 事件监听函数

参数 any args 触发事件参数

EventChannel.once(string eventName, function fn)

监听一个事件一次，触发后失效

string eventName 事件名称

function fn 事件监听函数

参数 any args 触发事件参数

示例：

小颖就先以 eventChannel.emit  示范下如何使用

在page1.vue中

<template>
    <view>
        跳转页面1
        <view class="page-box">
            获取的页面信息id：{{pageData.id}},name：{{pageData.name}}
        </view>
        <view>
            <button type="default" @click="changeTabBar" size="mini">跳转到个人中心</button>
            <button type="default" @click="changePages" size="mini">跳到第三个页面</button>
        </view>
    </view>
</template>

<script>
export default {
    data () {
        return {
            pageData: {
                id: '',
                name: ''
            },
            getEventsDt: {
                acceptDataFromOpenedPage: '',
                someEvent: '',
            }
        }
    },
    // 在跳转过来的页面的接收参数
    onLoad (option) {
        this.pageData = option
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    },
    onShow () {
        // 打印从  页面3  给  页面1  通过事件传递的数据
        console.log(this.getEventsDt)
    },
    methods: {
        // 改变当前tabBar 页面
        changeTabBar () {
            uni.switchTab({
                url: '/pages/personalCenter/personalCenter'
            });
        },
        changePages () {
            const _this = this;
            uni.navigateTo({
                url: ('/pages/toPage/page3'),
                events: {
                    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                    acceptDataFromOpenedPage: function (data) {
                        _this.getEventsDt.acceptDataFromOpenedPage = data.data
                        console.log(data)
                    },
                    someEvent: function (data) {
                        _this.getEventsDt.someEvent = data.data
                        console.log(data)
                    }
                },
                success: function (res) {
                    // 通过eventChannel向被打开页面传送数据
                    let _obj = {
                        id: '222',
                        title: '测试'
                    }
                    res.eventChannel.emit('acceptDataFromOpenerPage', _obj)
                }
            })
        }
    }
}
</script>

<style>

</style>

在跳转的页面3中 page3.vue

<template>
    <view>
        我是页面3
    </view>
</template>

<script>
export default {
    data () {
        return {

        }
    },
    // 在跳转过来的页面的接收参数
    onLoad (option) {
        // // #ifdef APP-NVUE
        // const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
        // // #endif
        // #ifndef APP-NVUE
        const eventChannel = this.getOpenerEventChannel();
        // #endif
        eventChannel.emit('acceptDataFromOpenedPage', { data: 'data from page3' });
        eventChannel.emit('someEvent', { data: 'data from page3 for someEvent' });
        // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
        eventChannel.on('acceptDataFromOpenerPage', function (data) {
            console.log(data)
        })
    },
    methods: {

    }
}
</script>

<style>

</style>

打印结果：

页面1  中的打印结果

页面3  的打印结果

从页面3  返回 页面1 时 ，在  onShow   生命周期函数中  打印出来 页面3 给 页面1 传递的数据

在uni-app中一般传值就是用  url 或者是上面的方法，两种方法的对比

上面的方法的优势：

• url有长度限制，太长的字符串会传递失败，eventChannel事件回调则不回
• 跳转新页面，能根据新页面内容反传给旧页面内容，上面代码没有体现，详见官方文档

劣势：

• 事件回调是在页面加载完成后才进行的回调，在computed里的内容计算完成后才会执行事件回调，因此页面会先显示默认值，再闪一下变成正确的值

注意：

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 不能在 App.vue 里面进行页面跳转。
• H5端页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。