uni-app跳转网页，这种方式有个最大好处，你知道吗？

常用跳转方式

一. uni-app路由

一般uni-app可以用的几种跳转方式如下(针对页面):

1. uni.navigateTo(OBJECT);

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

2. uni.redirectTo(OBJECT);

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

3. uni.switchTab(OBJECT);

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

4. uni.reLaunch(OBJECT);

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

按常用程度排名，基本用得最多的就是前面三个。

二. 浏览器

浏览器自带了window.location.href的方式，可以跳转到另一个页面。还有一种方式，window.open()，但这种方式在微信浏览器中无法使用（没试过）。

你应该用uni-app路由

其中最显著的优点：uni-app的路由可以保留应用内的各种状态。

最明显的一个例子是，假设你有一个聊天页面，聊天页面中加载了自定义消息。

自定义消息中包含一个超链接可以点击，点击之后需要跳转到第三方页面。

如果，你此时使用了window.location.href进行跳转。跳转之后，用户返回聊天界面，你的消息会丢失。

此时你需要再次和服务器连接，重新拉取数据，这个步骤是duck不必的。

那怎么办？

换成uni-app的路由：

1. 新建一个新页面；
2. 在新页面中定义一个web-view(uni-app中iframe的替代品，比iframe灵活好用[实际是帮你屏蔽了iframe的细节]，默认铺满全屏)①;
3. 通过uni-app路由(uni.navigateTo)跳转到新页面，获取参数并加载第三方页面。

好了，解决方案有了。

下面开始实践。

拿去直接用，不用谢

1. 定义跳转函数

toThirdOrderView(orderId) {
  if (orderId) {
    uni.navigateTo({
      url: `./orderView?orderId=${orderId}`,
    })
  }
},

2. 新页面

<template>
  <view>
    <web-view :src="srcUrl" id="myIframe" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        srcUrl: 'https://test-domain/orderId?p=',
      }
    },
    onLoad: function(option) {
      this.srcUrl = `${this.srcUrl}${option.orderId}`;
    },
    methods: {

    }
  }
</script>

<style scoped>
</style>

学会了吗？

①：web-view官方文档

https://uniapp.dcloud.net.cn/component/web-view.html