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>
相关推荐
Sterting3 小时前
第9课 Vue Router 路由
前端·vue.js
满栀5855 小时前
vue动态路由效果
前端·javascript·vue.js·前端框架·vue
心运软件6 小时前
SpringBoot+ Vue校园社团管理平台的完整架构设计
vue.js·后端
jjw_zyfx6 小时前
css vue vite实现闪烁的呼吸效果
javascript·css·vue.js
浅水壁虎8 小时前
vue基础(第四章 Pinia)
前端·javascript·vue.js
2501_916007478 小时前
Bundle ID 注册与管理 App ID 创建指南 命名规则 权限开关与删除注意事项
android·ios·小程序·https·uni-app·iphone·webview
学习星球9 小时前
Vue 3 实战:拆解 RealWorld 项目
前端·vue.js
大家的林语冰11 小时前
👉 尤雨溪再次成立新公司,同时官宣 Pinia 4 正式发布!
前端·javascript·vue.js
栀鸢ouo12 小时前
解决Element Plus表格展开行横向溢出、滚动截断问题(项目实战方案)
前端·vue.js
碧水澜庭12 小时前
头条【vue+fastapi 】全栈教学项目系列之《04_项目架构与文件结构说明书》
vue.js·架构·fastapi