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>
相关推荐
JIngJaneIL17 小时前
基于Java+ vue图书管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
VX:Fegn089518 小时前
计算机毕业设计|基于springboot + vue考勤管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
一 乐18 小时前
幼儿园管理|基于springboot + vue幼儿园管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端
JIngJaneIL18 小时前
基于Java + vue校园论坛系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
馬致远18 小时前
Vue TodoList 待办事项小案例(代码版)
前端·javascript·vue.js
一字白首18 小时前
Vue 进阶,Vuex 核心概念 + 项目打包发布配置全解析
前端·javascript·vue.js
计算机学姐18 小时前
基于SSM的网上花店销售系统【2026最新】
java·vue.js·mysql·java-ee·tomcat·intellij-idea·mybatis
OpenTiny社区19 小时前
从千问灵光 App 看生成式 UI 技术的发展
前端·vue.js·ai编程
代码or搬砖19 小时前
flask与vue实现通过websocket通信
vue.js·websocket·flask
Tzarevich20 小时前
从命令式到声明式:用 Vue 3 构建任务清单的开发哲学
javascript·vue.js·响应式编程