navigator路由与页面跳转

页面跳转（navigator）

先创建一个新页面demo，用于跳转，现在有两个页面了。
url属性代表要跳转去的路径。

在index页面中输入一段文字：“跳转至demo”，作为跳转按钮，并用navigator标签将其包裹，代码如下：

<template>
	<view>
		<swiper indicator-dots indicator-color ="#126bae" indicator-active-color = "#ee3f4d" circular autoplay interval = "2000" vertical>
			<swiper-item><image src="../../static/pic1.png" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src="../../static/pic2.png" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src="../../static/pic4.jpg" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src = "../../static/pic3.webp" mode="aspectFill"></image></swiper-item>
		</swiper>
	</view>
	<navigator url="/pages/demo/demo">
		<view>跳转至demo</view>
	</navigator>
</template>

<script	setup>
	
</script>

<style lang="scss">
	swiper{
		width:100vw ;
		height: 200px;
		border: 1px solid green;
		swiper-item{
			width: 100%;
			height:100%;
			background: pink;
			image{
				width: 100%;
				height:100%;
			}
		}
		swiper-item:nth-child(2n){
			background: coral;
		}
	}
	.pic2{
		width: 200px;
		height:200px;
	}
	.pic3{
		width: 300px;
	}
</style>

效果如下：

成功跳转至demo页面，并且在左上角有一个返回按钮，点击后会回到跳转前的页面，这是系统默认的设置。

跳转方式（open-type）

如何理解跳转方式？刚刚进行跳转时，左上方是有一个返回按钮的，说明跳转前的页面没有被关闭。通过跳转方式属性，可以设置页面跳转后，关闭跳转前的页面等操作。

reLaunch

这里演示一下open-type的reLaunch属性，即关闭所有页面，打开到应用内的某个页面。也就是说，打开页面后，跳转前的页面会被关闭，加上reLaunch，代码如下：

<template>
	<view>
		<swiper indicator-dots indicator-color ="#126bae" indicator-active-color = "#ee3f4d" circular autoplay interval = "2000" vertical>
			<swiper-item><image src="../../static/pic1.png" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src="../../static/pic2.png" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src="../../static/pic4.jpg" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src = "../../static/pic3.webp" mode="aspectFill"></image></swiper-item>
		</swiper>
	</view>
	<navigator url="/pages/demo/demo" open-type="reLaunch">
		<view>跳转至demo</view>
	</navigator>
</template>

<script	setup>
	
</script>

<style lang="scss">
	swiper{
		width:100vw ;
		height: 200px;
		border: 1px solid green;
		swiper-item{
			width: 100%;
			height:100%;
			background: pink;
			image{
				width: 100%;
				height:100%;
			}
		}
		swiper-item:nth-child(2n){
			background: coral;
		}
	}
	.pic2{
		width: 200px;
		height:200px;
	}
	.pic3{
		width: 300px;
	}
</style>

效果如下：

可以看到，这次跳转后，左上角的返回按钮消失了，说明跳转前页面被关闭了。

navigateBack

即关闭当前页面，返回上一页面或多级页面。刚刚跳转的演示我们用的是文字作为跳转按钮，接下来，结合navigateBack，把图片作为跳转按钮，同样的，用navigator标签把image包裹起来，代码如下：

<template>
	<view>
		<swiper indicator-dots indicator-color ="#126bae" indicator-active-color = "#ee3f4d" circular autoplay interval = "2000" vertical>
			<swiper-item><image src="../../static/pic1.png" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src="../../static/pic2.png" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src="../../static/pic4.jpg" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src = "../../static/pic3.webp" mode="aspectFill"></image></swiper-item>
		</swiper>
	</view>
	<navigator url="/pages/demo/demo">
		<image src="../../static/清新空气.png"></image>
	</navigator>
</template>

<script	setup>
	
</script>

<style lang="scss">
	swiper{
		width:100vw ;
		height: 200px;
		border: 1px solid green;
		swiper-item{
			width: 100%;
			height:100%;
			background: pink;
			image{
				width: 100%;
				height:100%;
			}
		}
		swiper-item:nth-child(2n){
			background: coral;
		}
	}
	.pic2{
		width: 200px;
		height:200px;
	}
	.pic3{
		width: 300px;
	}
</style>

效果如下：