navigator组件 相当于html的  <a>标签

<template>
	<view >瓜兮兮的世界</view>
	
	<view>
		<navigator url="/pages/a2/a2"  open-type="navigate">11111111111</navigator>
	</view>
</template>

<script setup>
	//vue3 组合式

</script>

<style lang="scss">
	.sv{
		width: 50vw;  
		border: 1px solid red;
	}
	
</style>

-------------------------navigator组件-------------------------

uniapp navigator组件基本用法

navigator组件是uniapp提供的页面跳转组件，类似于HTML中的a标签。该组件支持多种跳转方式，包括跳转到普通页面、跳转到tabBar页面、重定向和切换tab等。

<navigator url="/pages/home/home">跳转到首页</navigator>

组件属性详解

url属性：指定要跳转的页面路径，路径需在pages.json中注册 open-type属性：指定跳转方式，可选值包括navigate(默认)、redirect、switchTab、reLaunch、navigateBack delta属性：当open-type为navigateBack时有效，表示返回的页面数

<navigator url="/pages/list/list" open-type="redirect">重定向到列表页</navigator>

跳转到tabBar页面

跳转到tabBar页面必须使用switchTab方式，且路径需在pages.json的tabBar配置中注册

<navigator url="/pages/index/index" open-type="switchTab">切换到首页tab</navigator>

页面间传参

可以通过在url后拼接参数的方式实现页面间传参，接收页面在onLoad生命周期中获取参数

<navigator url="/pages/detail/detail?id=123">跳转到详情页</navigator>

接收页面获取参数：

onLoad(options) {
    console.log(options.id); // 输出123
}

跳转行为差异

navigate：保留当前页面，跳转到新页面 redirect：关闭当前页面，跳转到新页面 switchTab：跳转到tabBar页面 reLaunch：关闭所有页面，打开新页面 navigateBack：返回上一页面或多级页面

注意事项

跳转路径不支持使用相对路径，必须以/开头 H5端支持在navigator组件内嵌套任意内容，但其他端只能嵌套文本 APP端和H5端支持在navigator组件上绑定click事件，小程序端不支持