uni-app路由跳转

谁践踏了优雅 2023-07-12 14:43 10阅读 0赞

## 路由跳转 ##

**一、uni.navigateTo(OBJECT)**  
保留当前页面（跳转新的页面），跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面（非tabBar注册页面使用该方法）

methods: {
    	toPath(){
    		//跳转非pages.json>tabbar>配置过的页面，使用navigateTo
    		//跳转时保留老页面，一般用于需要返回
    		uni.navigateTo({
    			url:"../one/one"
    		})
    	}
    }

uni.navigateTo（object）必填参数url  
其他参数：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>animationType</td> 
   <td>String</td> 
   <td>pop-in</td> 
   <td>窗口显示的动画效果</td> 
  </tr> 
  <tr> 
   <td>animationDuration</td> 
   <td>Number</td> 
   <td>300</td> 
   <td>窗口动画持续时间，单位为 ms</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>Function</td> 
   <td></td> 
   <td>接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>Function</td> 
   <td></td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>Function</td> 
   <td></td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

*传参：*

//在起始页面跳转到test.vue页面并传递参数
    uni.navigateTo({
        url: 'test?id=1&name=uniapp'
    });

*在test.vue页面接受参数*

export default {
        onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
            console.log(option.id); //打印出上个页面传递的参数。
            console.log(option.name); //打印出上个页面传递的参数。
        }
    }

**二、uni.redirectTo(OBJECT)**  
关闭当前页面，跳转到应用内的某个页面。（url参数必须填写）  
实例：

methods: {
    			toPath(){
    				uni.redirectTo({
    					url:"../two/two"//关闭当前页面跳转到two页面
    				})
    			}
    		}

其他参数：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>success</td> 
   <td>Function</td> 
   <td></td> 
   <td>接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>Function</td> 
   <td></td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>Function</td> 
   <td></td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

**三、uni.reLaunch(OBJECT)**  
关闭所有页面，打开到应用内的某个页面。（url参数必须填写）  
其他参数：

实例：

uni.reLaunch({
        url: 'test?id=1'//带参数(如果跳转的页面路径是 tabBar 页面则不能带参数)
    });
    export default {
        onLoad: function (option) {
            console.log(option.id);
        }
    }

**四、uni.switchTab(OBJECT)**  
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面（url参数必须填写）  
跳转到 tabBar 页面只能使用 switchTab 跳转

methods: {
    	toPath(){
    		//跳转pages.json>tabbar>配置过的页面，使用switchTab
    		 uni.switchTab({
    			url:"../news/news"//需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数
    		 })
    	}
    }

其他参数：

实例：  
**五、uni.navigateBack(OBJECT)**  
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>delta</td> 
   <td>Number</td> 
   <td>1</td> 
   <td>返回的页面数，如果 delta 大于现有页面数，则返回到首页。</td> 
  </tr> 
  <tr> 
   <td>animationType</td> 
   <td>String</td> 
   <td>pop-out</td> 
   <td>窗口关闭的动画效果</td> 
  </tr> 
  <tr> 
   <td>animationDuration</td> 
   <td>Number</td> 
   <td>300</td> 
   <td>窗口关闭动画的持续时间，单位为 ms</td> 
  </tr> 
 </tbody> 
</table>

注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会

// 此处是A页面
    uni.navigateTo({
        url: 'B?id=1'
    });
    
    // 此处是B页面
    uni.navigateTo({
        url: 'C?id=1'
    });
    
    // 在C页面内 navigateBack，将返回A页面
    uni.navigateBack({
        delta: 2
    });

**提示：**

*  navigateTo, redirectTo 只能打开非 tabBar 页面。
 *  switchTab 只能打开 tabBar 页面。
 *  reLaunch 可以打开任意页面。
 *  页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
 *  不能在 App.vue 里面进行页面跳转。