首页 > 其他分享 >【UniApp】-uni-app-路由

【UniApp】-uni-app-路由

时间:2023-12-16 11:22:05浏览次数:54  
标签:UniApp app two three 跳转 uni pages 页面

前言

  • 好,经过上个章节的介绍完毕之后,了解了一下 uni-app-CompositionAPI应用生命周期和页面生命周期
  • 那么了解完了uni-app-CompositionAPI应用生命周期和页面生命周期之后,这篇文章来给大家介绍一下 uni-app-路由
  • 前面我还说过,除了有应用程序的生命周期和页面的生命周期以外,其实还有组件的生命周期,组件的生命周期我就不介绍了
  • 为什么呢?因为 UniApp 当中组件的生命周期和 Vue 的组件的生命周期是一样的,所以这里就不再介绍了
  • 那么我们不管三七二十一,先来新建一个项目

搭建演示环境

创建一个全新的项目:

然后在配置一下,微信小程序的 AppId,直接去之前的项目中拷贝一下即可,找到之前项目的 manifest.json 文件,然后选择微信小程序配置,复制一下即可。

这里我创建三个页面来进行演示,分别是 one, two, three,然后在 pages.json 文件中配置一下,我直接将对应的代码粘贴在下方快速搭建起来,主要是看 UniApp 中路由的知识点。

one 页面:

<template>
	<view>
		<text>one</text>
	</view>
</template>

two 页面:

<template>
	<view>
		<text>two</text>
	</view>
</template>

three 页面:

<template>
	<view>
		<text>three</text>
	</view>
</template>

首页:

<template>
	<view>
		<text>首页</text>
	</view>
</template>

pages.json 配置:

{
  "pages": [{
    "path": "pages/index/index",
    "style": {
      "navigationBarTitleText": "首页",
      "enablePullDownRefresh": false
    }
  },
    {
      "path": "pages/one/one",
      "style": {
        "navigationBarTitleText": "one",
        "enablePullDownRefresh": false
      }
    },
    {
      "path": "pages/two/two",
      "style": {
        "navigationBarTitleText": "two",
        "enablePullDownRefresh": false
      }
    },
    {
      "path": "pages/three/three",
      "style": {
        "navigationBarTitleText": "three",
        "enablePullDownRefresh": false
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/one/one",
      "text": "one"
    }, {
      "pagePath": "pages/two/two",
      "text": "two"
    }, {
      "pagePath": "pages/three/three",
      "text": "three"
    }]
  }
}
  • 经过如上的这么一顿操作之后,就可以搭建完毕运行环境,与编码环境
  • 接下来就可以开始进行介绍 uni-app-路由内容了

步入正题

什么是路由呢?路由就是页面之间的跳转,比如说我们现在在首页,然后我们点击了一个按钮,然后跳转到了 one 页面,这个过程就是路由

那么在 UniApp 中怎么进行路由跳转呢?这个时候就需要我们打开官方文档进行查阅了,官方文档地址:https://uniapp.dcloud.net.cn/tutorial/page.html#路由

经官方介绍,uni-app 有两种页面路由跳转方式:使用navigator组件跳转、调用API跳转。

首先我们来看 调用API跳转

调用API跳转

打开调用API跳转官方文档:https://uniapp.dcloud.net.cn/api/router.html#

这里我介绍一下常用的几个 API:

  1. uni.navigateTo(OBJECT):保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面,跳转到的目标页面会有返回按钮。

更改 index.vue 文件,添加一个按钮,点击按钮跳转到 one 页面:

<template>
	<view>
		<button @click="onJumpOne">navigateTo</button>
	</view>
</template>

<script>
	export default {
		methods: {
			onJumpOne() {
				uni.navigateTo({
					url: '/pages/one/one'
				})
			}
		}
	}
</script>

当我运行测试发现,控制台报错了,错误信息是 navigateTo:fail can not navigateTo a tabbar page ,意思是说不能跳转到 tabBar 页面,我们需要将 pages.json 文件中的 tabBar 配置去掉,为什么要去掉呢?因为 tabBar 页面是底部导航栏,是不能跳转的,所以我们需要将其去掉,然后再次运行测试,发现可以正常跳转了。

这里我将 one/two 的 tabBar 配置去掉,然后再次运行测试,发现可以正常跳转了。

  1. uni.redirectTo(OBJECT):关闭当前页面,跳转到应用内的某个页面。是没有返回按钮的。

更改 index.vue 文件,添加一个按钮,点击按钮跳转到 two 页面:

<template>
  <view>
    <button @click="onJumpOne">redirectTo</button>
  </view>
</template>

<script>
  export default {
    methods: {
      onJumpOne() {
        uni.redirectTo({
          url: '/pages/two/two'
        })
      }
    }
  }
</script>
  1. uni.switchTab(OBJECT):跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

更改 index.vue 文件,添加一个按钮,点击按钮跳转到 three 页面:

<template>
	<view>
		<button @click="onJumpOne">switchTab</button>
	</view>
</template>

<script>
	export default {
		methods: {
			onJumpOne() {
				uni.switchTab({
					url: '/pages/three/three'
				})
			}
		}
	}
</script>

到这,通过调用 API 的方式,我们就可以实现页面之间的跳转了。大概就先介绍这么多,接下来我们来看看第二种方式。

使用navigator组件跳转

打开官方文档:https://uniapp.dcloud.net.cn/component/navigator.html#

废话不多说,直接将上面的代码转换为 navigator 组件的方式,navigator 中最主要是属性就是 url 与 open-type。

  • url:跳转的页面路径,可以是绝对路径,也可以是相对路径
  • open-type:跳转方式

更改 index.vue 文件,添加三个按钮,分别跳转到 one、two、three 页面:

<template>
	<view>
		<navigator url="/pages/one/one" open-type="navigate">
			<button type="default">navigate</button>
		</navigator>
		<navigator url="/pages/two/two" open-type="redirect">
			<button type="default">redirect</button>
		</navigator>
		<navigator url="/pages/three/three" open-type="switchTab">
			<button type="default">switchTab</button>
		</navigator>
	</view>
</template>

最后

大家好我是 BNTang, 一个热爱分享的技术的开发者,如果大家觉得我的文章对你有帮助的话,可以关注我的公众号 JavaBoyL,我会在公众号中分享一些IT技术和一些个人的见解,谢谢大家的支持。

标签:UniApp,app,two,three,跳转,uni,pages,页面
From: https://www.cnblogs.com/BNTang/p/17904618.html

相关文章

  • .NET微信网页开发之通过UnionID机制解决多应用用户帐号统一问题
    背景随着公司微信相关业务场景的不断拓展,从最初的一个微信移动应用、然后发展成微信公众号应用、然后又有了微信小程序应用。但是随着应用的拓展,如何保证相同用户的微信用户在不同应用中登录的同一个账号呢?今天的主题就来了.NET微信网页开发之通过UnionID机制解决多应用用户帐号......
  • 《convex optimization》——Stanford University open class
    202312151.Introductionmathematicaloptimizationleast-squaresandlinearprogramingconvexoptimizationexapmlecoursegoalsandtopicsnonlinearoptimizationbriefhistoryofconvexoptimizationmathmeticaloptimizationoptimizationproblemminimize......
  • uniapp nvue 手指缩放
    uniapp nvue中俩个手指按下,每次只会监听到一个 uniapp 中双指缩放,touch.scale为当前的缩放比例<template> <[email protected]="move"@touchmove.stop="moving"> {{touch.scale}} </view></template><script>exportdefault{......
  • unity广州站gpu resident drawer笔记
    unity广州站gpuresidentdrawer笔记什么是gpuresidentdrawer  将MeshRenderer数据转为BRGbatch(BatchRendererGroup)数据的机制。  它在unity6正式推出,并关联dots。  它优化的是CPU耗时,但也可能进而提高gpu的性能。因为需要提交给GPU的绘制调用更少。  通过gpure......
  • python flask 生产环境部署,基于gunicorn
    1.安装gunicorn,部分生产服务器会存在多个pip版本,一般用pip和pip3区分,本文中用pippipinstallgunicorn2.启动程序cd/usr/appgunicorn--workers2-b0.0.0.0:5056app:app 验证项目正常后继续如下操作3.配置gunicorn配置文件查看centos版本cat/etc/redhat-releas......
  • Android app 浮动时间APP(Android)
    前言全局说明浮动时间APP(Android)各大购物网站的服务器精确时间一、网址http://float.bertsir.com浮动时间,一个为抢购而生的APP,这个软件不是外挂,经常抢购的人应该必备的浮动时间App。免责声明:本号所涉及内容仅供安全研究与教学使用,如出现其他风险,后果自负。参......
  • 在Python的类型提示中,你不能直接使用​​or​​​来表示一个参数可以是多种类型中的一
    在Python的类型提示中,你不能直接使用or来表示一个参数可以是多种类型中的一种。你应该使用typing.Union来表示这种情况¹²。所以,你的函数应该这样写:fromtypingimportUnion,Listdefquery_coilNum(self,coilNum:Union[str,List[str]]):pass在这个例子中,Union[str,Li......
  • asp.net 启动后重启 端口被占用 Global.asax 以及Application_End
    最近在维护一个老的asp.net项目最开始发现一个诡异的现象,那就是本地调试的时候这个项目经常在启动后莫名其妙的重启逐步调试发现原来是该项目会监听一个本地端口,项目重启时会出现端口被占用的情况,为了保证端口不会占用,会先判断一下端口的情况,如果发现端口被占用,就强制杀掉占用该......
  • Unity引擎2D游戏开发,实现人物下蹲逻辑和动画
    将下蹲动画创建进人物中在Animation窗口中的左侧,新建BlueCrouchStart动画时间轴,然后将下蹲动画拖入时间轴中62,63,64都是下蹲中的动画,但是64号是下蹲动作完毕后的静止动画,因为不拖入时间轴中,单独为其建立一个时间轴为64号下蹲动画完毕的静止动画单独创建一个时间轴,并命名为BlueC......
  • Mapper.xml
    <resultMapid="resuleMap"type="com.com.entity.xxx"><idproperty="id"column="id"></id><resultproperty="xxx"column="xxx"></result ><resultproperty=&qu......