UniApp 跳转外部链接实现

1. UniApp 跳转外部链接实现

1.1. 方式一：webview

  uni.navigateTo跳转到我们定义的一个内部页面，内部页面接收需要跳转到外部的URL。

1.1.1. 创建页面webview.vue

  首先，我们需要创建一个目标页面，用于加载外部链接。
  在 pages 目录下创建一个新的文件夹，例如 webview，然后在该文件夹下创建一个 webview.vue 文件。

<template><view class="container"><web-view :src="externalUrl"></web-view></view>
</template>
<script>
export default {data() {return {externalUrl: ''};},onLoad() {this.externalUrl = this.$route.query.url;}
};
</script>
<style scoped>
.container {width: 100%;height: 100vh;
}
</style>

  在上述代码中，我们使用了 组件来显示外部链接。externalUrl 是从路由参数中获取的外部链接，作为 src 属性传递给 组件。

1.1.2. 配置路由

  接下来，我们需要在 router/index.js 文件中配置路由，以便能够访问到目标页面。

import Vue from 'vue';
import Router from 'uni-simple-router';Vue.use(Router);const router = new Router({routes: [// 其他页面路由配置...{path: '/pages/webview/webview',name: 'webview'}]
<