uniapp的两个跳转方式

r囧r小猫 2023-10-03 22:29 33阅读 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 条评论，33人围观）

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

相关阅读

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

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

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

相关 uniapp的两个跳转方式

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

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

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

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

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

相关 H5跳转小程序，uniapp跳转小程序

网页跳转小程序需要使用微信的开放标签 [wx-open-launch-weapp][] ，使用开放标签需要使用微信的jssdk，然后sdk的版本不能低，低版本点击无效。先给

以你之姓@/ 2023年01月17日 07:48/ 0 赞/ 328 阅读

相关两个servlet之间的跳转

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

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

相关 uniapp 页面跳转的坑

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

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

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

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

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

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

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

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

相关 SpringMVC跳转方式

1. 默认是请求转发 2. 这是返回值字符串内容重定向 2.1. 添加redirect:资源路径重定向 2.2. 添加forward:资源路径（

谁借莪１个温暖的怀抱￠/ 2022年05月08日 12:18/ 0 赞/ 304 阅读

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

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

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