uniapp vue3 点击跳转外部网页

需求

项目登录界面有隐私协议,用户点击对应的协议,跳转到对应的外部网页。

问题

使用uni.navigateTo跳转后,界面未加载上。

解决思路

跳转逻辑参考:

承载网页的容器:

代码

login.vue 登录页面

js 复制代码
<template>
	...
	<text class="text">我已阅读并同意<text class="agreement" @tap.stop="onUserAgreement">《用户协议》</text>
	...
</template>
<script setup>
	...
	const onUserAgreement = () => {
		const url = 'https://*****' // 对应的网址
		uni.navigateTo({
		    url: '/webview/webview?url=' + encodeURIComponent(url)
		})
	}
	...
</script >

webview.vue 承载网页的页面

js 复制代码
<template>
	<view class="container">
		<web-view :src="url"></web-view>
	</view>
</template>
<script setup>
	import { ref, getCurrentInstance } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	const { proxy } = getCurrentInstance()
	onLoad((option) => {
		url.value = decodeURIComponent(option.url)
	})
	const url = ref('')
</script>

<style scoped lang='scss'>
	.container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		padding: 10px;
		box-sizing: border-box;
		background-color: #fff;
	}
</style>
相关推荐
行云流水62617 小时前
uniapp pinia实现数据持久化插件
前端·javascript·uni-app
zhangyao94033017 小时前
uniapp动态修改 顶部导航栏标题和右侧按钮权限显示隐藏
前端·javascript·uni-app
小云朵爱编程20 小时前
Vue项目Iconify的使用以及自定义图标,封装图标选择器
前端·javascript·vue.js
2501_9160074720 小时前
iOS 压力测试的工程化体系,构建高强度、多维度、跨工具协同的真实负载测试流程
android·ios·小程序·uni-app·cocoa·压力测试·iphone
l***O52020 小时前
前端路由历史监听,React与Vue实现
前端·vue.js·react.js
滿21 小时前
vue3 elementplus el-table toggleRowSelection使用方法
javascript·vue.js·elementui
2501_916008891 天前
API接口调试全攻略 Fiddler抓包工具、HTTPS配置与代理设置实战指南
前端·ios·小程序·https·fiddler·uni-app·webview
Coder-coco1 天前
点餐|智能点餐系统|基于java+ Springboot的动端的点餐系统小程序(源码+数据库+文档)
java·vue.js·spring boot·小程序·论文·毕设·电子点餐系统
by__csdn1 天前
Electron+Vite:实现electron + vue3 + ts + pinia + vite高效跨平台开发指南
前端·javascript·vue.js·typescript·electron·node.js·vue
2501_915921431 天前
iOS 开发者工具推荐,构建从调试到性能优化的多维度生产力工具链(2025 深度工程向)
android·ios·性能优化·小程序·uni-app·iphone·webview