uniapp的两个跳转方式

r囧r小猫 2023-10-03 22:29 108阅读 0赞

uniapp内置多种跳转方式，我这里介绍两个最常用的跳转，uni.navigateTo和uni.switchTab，前者为跳转到非TabBar页面，后者为跳转到TabBar页面，所谓TabBar就是底部导航栏配置的页面，例如下方的index.vue。  
![在这里插入图片描述][4f4caba9ef164d65b189dea08069d5d6.png]  
配置成导航栏的页面无法通过navigateTo方法跳转，只能通过switchTab方法。

##### 一、navigateTo #####

例如我们需要在index.vue页面里面跳转到test1.vue，test1是非tabBar页面，就给需要绑定事件的按钮添加点击事件。再在methods里面编写方法，调用uni.navigateTo

<template>
    	<view class="home ">
    		<button @click="toTest1"></button>
    	</view>
    
    </template>
    
    <script>
    	export default {
        
    		data() {
        
    			return {
        
    			}
    		},
    		methods: {
        
    			toTest1() {
        
    				uni.navigateTo({
        
    					url:'/pages/test1/test1'
    				})
    			}
    		}
    	}
    </script>

##### 二、switchTab #####

这里我们在test1页面中想点击按钮跳转到index页面

<template>
    	<view class="home ">
    		<button @click="toIndex"></button>
    	</view>
    
    </template>
    
    <script>
    	export default {
        
    		data() {
        
    			return {
        
    			}
    		},
    		methods: {
        
    			toIndex() {
        
    				uni.switchTab({
        
    					url:'/pages/index/index'
    				})
    			}
    		}
    	}
    </script>

[4f4caba9ef164d65b189dea08069d5d6.png]: https://img-blog.csdnimg.cn/4f4caba9ef164d65b189dea08069d5d6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，108人围观）

还没有评论，来说两句吧...

相关阅读

相关 servlet实现跳转的两种方式，这两种方式的区别

servlet实现跳转的两种方式，这两种方式的区别：重定向重定向的两种方式： 1.302+Location response.setSta...

妖狐艹你老母/ 2024年04月17日 23:01/ 0 赞/ 223 阅读

相关 uniapp的两个跳转方式

uniapp内置多种跳转方式，我这里介绍两个最常用的跳转，uni.navigateTo和uni.switchTab，前者为跳转到非TabBar页面，后者为跳转到TabBar页面

r囧r小猫/ 2023年10月03日 22:29/ 0 赞/ 109 阅读

相关 SpringMVC中结果的跳转跳转方式

ModelAndView 设置ModelAndView对象，根据view的名称，和视图解析器跳到指定的页面页面：视图解析器前缀（prefix）+viewName+视图

拼搏现实的明天。/ 2023年07月18日 11:18/ 0 赞/ 45 阅读

相关 vue页面跳转的两种方式

参考网址： https://www.jb51.net/article/160401.htm 1、利用router-link跳转 <el-table-column

ゝ一纸荒年。/ 2023年06月18日 12:55/ 0 赞/ 142 阅读

相关 react跳转页面的两种方式

this.props.history.push('路由地址') this.props.history.replace('路由地址') 区别： push:

àì夳堔傛蜴生んèń/ 2023年02月10日 05:22/ 0 赞/ 94 阅读

相关两个servlet之间的跳转

代码如下： @WebServlet("/oneServlet") public class oneServlet extends HttpServlet {

淡淡的烟草味﹌/ 2022年12月18日 09:00/ 0 赞/ 268 阅读

相关 uniapp 页面跳转的坑

uniapp 页面跳转的坑我们在使用 uniapp 的时候，经常使用到页面跳转，uniapp 的几个常用跳转我就不一一列表了。我就说我遇到的坑吧如下图，我要从

川长思鸟来/ 2022年11月20日 05:59/ 0 赞/ 511 阅读

相关 php表单跳转页面跳转页面跳转页面跳转,html中一个form下两个跳转页面

问题说明：在html开发中，经常碰到同一个form表单下，不同按钮跳转不同界面，如下 ![3b2afef13409193c29d0759b8abcfff3.png][]，

太过爱你忘了你带给我的痛/ 2022年11月17日 10:16/ 0 赞/ 443 阅读

相关 Android中两个Activity之间的跳转

1. Android中两个Activity之间的跳转 http://hi.baidu.com/feng131719/blog/item/54c3ee3e677f9ace7c1

桃扇骨/ 2022年07月14日 16:37/ 0 赞/ 390 阅读

相关 uniapp——两种方式导航跳转和传参

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

短命女/ 2021年07月25日 13:31/ 0 赞/ 699 阅读