uni-app 页面应用内跳转与应用外跳转的实现方式

我们在用 uni-app 开发前端应用时，页面跳转是必不可少的。页面跳转主要包含应用内跳转（站内跳转）和应用外跳转（外部跳转）。下面我们一起来看看具体实现方式。

站内跳转

站内跳转主要有两种实现方式，可以通过组件和 API 接口方式实现。

采用 navigator 组件

<template>
    <view>
        <navigator url="/pages/view/view?id=1" open-type="navigate">
            <button type="default">跳转到新页面</button>
        </navigator>
    </view>
</template>

采用 API 接口

<template>
    <view>
        <button type="default" @tap="toView">跳转到新页面</button>
    </view>
</template>
<script>
    export default {
        methods: {
            toView () {
                uni.navigateTo({
                    url: '/pages/view/view?id=1'
                })
            }
        }
    }
</script>

open-type 主要有效值与 API 的对应关系

值	对应 API	说明
navigate	uni.navigateTo	保留当前页面，跳转到应用内的某个页面
redirect	uni.redirectTo	关闭当前页面，跳转到应用内的某个页面
switchTab	uni.switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	uni.reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	uni.navigateBack	关闭当前页面，返回上一页面或多级页面

更多规则可查看：官方文档

目标页面参数接收：

<script>
    export default {
        onLoad: function (option) { // option为object类型，会序列化上个页面传递的参数
            console.log(option.id) // 打印出上个页面传递的参数。
        }
    }
</script>

外部跳转

外部跳转直接可以使用 web-view 组件，会自动铺满整个页面。

步骤1：在项目根路径下的 pages 目录下，新建一个页面，用于专门放置外部网站

<template>
    <web-view :src="url"></web-view>
</template>
 
<script>
    export default {
        data() {
            return {
                url: null  //要打开的外部链接
            }
        },
        onLoad: function (option) {
            this.url = option.url
        }
    }
</script>

步骤2：配置 pages.json

{
    "pages": [
        ……,
        {
            "path": "pages/web-view/web-view",
                "style": {
                    "navigationBarTitleText": "页面标题"
                }
            }
        }
    ]
}

步骤3：在需要跳转的页面，通过 navigator 组件或 API 进行跳转

<template>
    <view>
        <navigator url="/pages/web-view/web-view?url=https://www.baidu.com/">访问百度</navigator>
    </view>
</template>