UniApp 是一个基于 Vue.js 的跨平台开发框架，可以方便地开发多个平台的应用程序，包括小程序、H5、App 等。在 UniApp 中，要实现跳转到外部链接（即打开一个网页）可以采用以下步骤：
1. 创建目标页面
首先，我们需要创建一个目标页面，用于加载外部链接。
在
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>
在上述代码中，我们使用了
<web-view>
组件来显示外部链接。
externalUrl
是从路由参数中获取的外部链接，作为
src
属性传递给
<web-view>
组件。
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'
}
]
});
export default router;
在上述代码中，我们添加了一个名为
webview
的路由项，指向目标页面的路径
/pages/webview/webview
。
3. 触发跳转
最后，在需要触发跳转到外链的地方，我们可以使用
uni.navigateTo
或
uni.redirectTo
方法进行页面跳转。
// 在某个页面的方法中触发跳转外链
uni.navigateTo({
url: '/pages/webview/webview?url=https://www.example.com'
});
在上述代码中，我们使用
uni.navigateTo
方法指定了要跳转到的目标页面路径
/pages/webview/webview
，并通过添加
url
参数将外部链接传递给目标页面。
现在，当点击触发跳转的按钮时，就会打开指定的外部链接页面。
这样，我们就实现了在 UniApp 中跳转外部链接的功能。请根据自己的项目结构和需求进行相应调整和优化。
参考链接：