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>
相关推荐
EchoEcho19 小时前
深入理解 Vue.js 渲染机制:从声明式到虚拟 DOM 的完整实现
vue.js
C澒19 小时前
Vue 项目渐进式迁移 React:组件库接入与跨框架协同技术方案
前端·vue.js·react.js·架构·系统架构
发现一只大呆瓜21 小时前
虚拟列表:从定高到动态高度的 Vue 3 & React 满分实现
前端·vue.js·react.js
鱼毓屿御21 小时前
如何给用户添加权限
前端·javascript·vue.js
Java新手村1 天前
基于 Vue 3 + Spring Boot 3 的 AI 面试辅助系统:实时语音识别 + 大模型智能回答
vue.js·人工智能·spring boot
雯0609~1 天前
hiprint:实现项目部署与打印3-vue版本-独立出模板设计与模板打印页面
前端·vue.js·arcgis
David凉宸1 天前
Vue 3 + TS + Vite + Pinia vs Vue 2 + JS + Webpack + Vuex:对比分析
javascript·vue.js·webpack
滕青山1 天前
Vue项目BMI计算器技术实现
前端·vue.js
2501_916008891 天前
深入解析iOS机审4.3原理与混淆实战方法
android·java·开发语言·ios·小程序·uni-app·iphone
boooooooom1 天前
Pinia必学4大核心API:$patch/$reset/$subscribe/$onAction,用法封神!
javascript·vue.js·面试