若依(ruoyi)RuoYiApp版—路由

于由城南蝈蝈发布

UniApp 的路由系统是其核心特性之一，它基于页面栈的概念进行管理，与微信小程序的路由机制非常相似。这套系统旨在为开发者提供一种简单、一致的方式来管理页面跳转和传参。

UniApp 通过一个页面栈来管理所有页面。每次跳转新页面，新页面会被压入栈顶；返回上一页，栈顶页面会被弹出。路由方式主要分为以下两种：

  1. 路由跳转：打开新页面，新页面入栈。
  2. 路由返回：关闭当前页面，返回上一页面或多级页面，页面出栈

本文源代码下载地址

本文下载链接(访问密码: 7381)：RuoYi-App08.zip: https://url47.ctfile.com/f/64055047-8442554323-ecfa1b?p=7381

本文演示uniapp中的路由跳转功能

1.路由总览
API作用页面栈变化
uni.navigateTo跳转到新页面，保留当前页新页面入栈
uni.redirectTo关闭当前页，跳转到新页当前页替换为新页
uni.switchTab跳转到 Tab 页关闭所有非 Tab 页，打开目标 Tab 页
uni.navigateBack返回上一页或多页页面出栈
uni.reLaunch关闭所有页，打开新页清空栈，新页入栈
2.navigateTo

用法：uni.navigateTo(OBJECT)

OBJECT参数说明

参数类型必填默认值说明平台差异说明
urlString是需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数
animationTypeString否pop-in窗口显示的动画效果，详见：窗口动画App
animationDurationNumber否300窗口动画持续时间，单位为 msApp
eventsObject否页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

我们的目的的创建一个页面，假设叫chinese，在主页中新增一个按钮，当用户点击按钮时，就跳转到我们创建的chinese页面

（1）创建页面

新建uni-app页面如下

如果我们勾选了上图中的“在pages.json中注册”，可以在pages.json中查看刚才的信息。

我们在这个文件中，加入一段文字，用来展示这个页面的内容。

上述页面的参考代码如下：

<template>
	<view>
		这是chinese页面
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

（2）编写路由跳转

我们在主页中填写跳转的相关代码，在pages文件夹中的index.vue代码

参考代码如下：

<template>
  <view class="content">
    <image class="logo" src="@/static/logo.png"></image>
    <view class="text-area">
      <text class="title">Hello RuoYi</text>
    </view>
	<text>
		<button @click="test_navigateTo">测试navitationTo跳转</button>
	</text>
  </view>
</template>
<script>
	export default {
		onInit(){
			console.log("chinese页面"+"onInit")
		},	
		methods:{
			test_navigateTo() {
			  uni.navigateTo({
			  	url:'/pages/chinese/chinese'
			  })
			},
		}
	}
</script>
<style scoped>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>

跳转效果如下：

3.uni.redirectTo

参数说明：

参数类型必填说明
urlString是需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

我们在index中新增一个button，并填写相关的跳转方法

参考代码如下：

<template>
  <view class="content">
    <image class="logo" src="@/static/logo.png"></image>
    <view class="text-area">
      <text class="title">Hello RuoYi</text>
    </view>
	<text>
		<button @click="test_navigateTo">测试navitationTo跳转</button>
		<button @click="test_redirectTo">测试redirectTo跳转</button>
	</text>
  </view>
</template>
<script>
	export default {
		onInit(){
			console.log("chinese页面"+"onInit")
		},	
		methods:{
			test_navigateTo() {
			  uni.navigateTo({
			  	url:'/pages/chinese/chinese'
			  })
			},
			test_redirectTo(){
				uni.redirectTo({
					url: '/pages/chinese/chinese'
				})
			}
		}
	}
</script>
<style scoped>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>

效果如下：

可以看到，这个跳转后，左上角没有返回标志。

4.uni.switchTab

switchTab的功能跳转到 Tab 页。

相关参数如下：

参数类型必填说明
urlString是需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

修改index.vue代码如下：

上述参考代码如下：

<template>
  <view class="content">
    <image class="logo" src="@/static/logo.png"></image>
    <view class="text-area">
      <text class="title">Hello RuoYi</text>
    </view>
	<text>
		<button @click="test_navigateTo">测试navitationTo跳转</button>
		<button @click="test_redirectTo">测试redirectTo跳转</button>
		<button @click="test_switchTab">测试switchTab跳转</button>
	</text>
  </view>
</template>
<script>
	export default {
		onInit(){
			console.log("chinese页面"+"onInit")
		},	
		methods:{
			test_navigateTo() {
			  uni.navigateTo({
			  	url:'/pages/chinese/chinese'
			  })
			},
			test_redirectTo(){
				uni.redirectTo({
					url: '/pages/chinese/chinese'
				})
			},
			test_switchTab(){
				uni.switchTab({
					url:'/pages/mine/index'
				})
			}
			
		}
	}
</script>
<style scoped>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>

效果如下：

5.navigateBack

关闭当前页面，返回上一页面或多级页面。

相关参数如下：

参数类型必填默认值说明平台差异说明
deltaNumber否1返回的页面数，如果 delta 大于现有页面数，则返回到首页。
animationTypeString否pop-out窗口关闭的动画效果，详见：窗口动画App
animationDurationNumber否300窗口关闭动画的持续时间，单位为 msApp
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

我们在chinese页面增加了一个测试返回的功能

chinese页面修改后如下：

<template>
	<view>
		这是chinese页面		
		<button @click="test_navigateBack">测试返回</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			test_navigateBack(){
				uni.navigateBack({
					delta: 1 //返回一层
				});
			},
			
		}
	}
</script>

<style>

</style>

实现效果如下：

可以看出来，使用navigateTo这个方法，可以正常返回，

使用redirectTo这个方法，无法正常返回。

6.relaunch

关闭所有页面，打开到应用内的某个页面。

相关参数如下：

参数类型必填说明
urlString是需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’，如果跳转的页面路径是 tabBar 页面则不能带参数
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

在index.vue中增加测试代码

相关的代码示例如下：

<template>
  <view class="content">
    <image class="logo" src="@/static/logo.png"></image>
    <view class="text-area">
      <text class="title">Hello RuoYi</text>
    </view>
	<text>
		<button @click="test_navigateTo">测试navitationTo跳转</button>
		<button @click="test_redirectTo">测试redirectTo跳转</button>
		<button @click="test_switchTab">测试switchTab跳转</button>
		<button @click="test_reLaunch">测试reLaunch跳转</button>
	</text>
  </view>
</template>
<script>
	export default {
		onInit(){
			console.log("chinese页面"+"onInit")
		},	
		methods:{
			test_navigateTo() {
			  uni.navigateTo({
			  	url:'/pages/chinese/chinese'
			  })
			},
			test_redirectTo(){
				uni.redirectTo({
					url: '/pages/chinese/chinese'
				})
			},
			test_switchTab(){
				uni.switchTab({
					url:'/pages/mine/index'
				})
			},
			test_reLaunch(){
				uni.reLaunch({
					url:'/pages/chinese/chinese'
				})
			}
			
		}
	}
</script>
<style scoped>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>

实现效果如下：

从上面的图中可以看出执行的效果图。

Post Views: 46

Related posts:

  1. 若依(ruoyi)RuoYiApp版—项目下载运行
  2. 若依(ruoyi)前后端分离版—从0到1带你搭建项目(1)—项目运行
  3. 若依(ruoyi)前后端分离版—从0到1带你搭建项目(2)—项目结构分析
  4. 若依(ruoyi)前后端分离版—从0到1带你搭建项目(7)—表单构建、代码生成、系统接口
  5. 若依(ruoyi)RuoYiApp版—介绍
  6. 若依(ruoyi)RuoYiApp版—项目结构分析
分类： 开发与创造
标签：

相关文章

开发与创造

若依(ruoyi)RuoYiApp版—页面

ruoyiApp中的页面是一个符合vue规范的文件，如果你熟悉vue， 阅读更多…

开发与创造

若依(ruoyi)RuoYiApp版—tabBar

1.tabBar简介 如果应用是一个多 tab 应用，可以通过 tab 阅读更多…

开发与创造

若依(ruoyi)RuoYiApp版—全局样式globalStyle

globalStyle是全局样式，表示默认页面的窗口表现，主要用于设置 阅读更多…