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

朱雀 2021-03-29 11:37 2375阅读 0赞

我们在用 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>

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

更多规则可查看：[官方文档](https://uniapp.dcloud.io/api/router?id=navigateto)

**目标页面参数接收：**

```
<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>
```