uniapp路由跳转

曼妙佳人

uni.navigateTo
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面

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

复制代码

uni.redirectTo
关闭当前页面，跳转到应用内的某个页面。

1. uni.redirectTo({
   
2.     url: 'test?id=1'
   
3. });

复制代码

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

1. uni.reLaunch({
   
2.     url: 'test?id=1'
   
3. });

复制代码

uni.switchTab
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

1. uni.switchTab({
   
2.     url: '/pages/index/index'
   
3. });

复制代码

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

1. uni.navigateBack({
   
2.     delta: 2
   
3. });

复制代码

技术拓展

后台自定义小程序内部页面跳转
uniapp有一个原生Tab路由切换，这个时候的路由是通过uni.switchTab才能够实现跳转的。
有时候我们会遇到一些情况，就是自定义跳转小程序内部的指定页面，链接是通过后台配置的，那这个时候我们无法指定是常规单页面还是tab页面，这个时候封装一个兼容的路由跳转就很有必要了，下面举个栗子

1. goto(url) {
   
2.                 console.log("getCurrentPages().length======保留当前页面", getCurrentPages().length);
   
3.                 if (!url || url == '') {
   
4.                         return
   
5.                 }
   
6.                 uni.navigateTo({
   
7.                         url: url,
   
8.                         fail: (fail) => {
   
9.                                 // 导航标签切换
   
10.                                 if (fail.errMsg.indexOf('tab bar page') != -1 || fail.errMsg.indexOf('tabbar page') != -
    
11.                                         1 || fail.errMsg.indexOf('non-tab pages') != -1) {
    
12.                                         uni.switchTab({
    
13.                                                 url: url
    
14.                                         })
    
15.                                 }
    
16.                         }
    
17.                 })
    
18.         },

复制代码

在当前页面修改上一个页面的数据

1. setPagesData(name, data, back = false) {
   
2.                 let pages = getCurrentPages();
   
3.                 // var currPage = pages[pages.length - 1]; //当前页面
   
4.                 let prevPage = pages[pages.length - 2]; //上一个页面
   
5. 
   
6.                 //h5的写法
   
7.                 prevPage[name] = data;
   
8. 
   
9.                 //小程序的写法 具体要怎么写可以打印一下prevPage看一下
   
10.                 // #ifdef APP-PLUS
    
11.                 prevPage.$vm[name] = data;
    
12.                 // #endif
    
13.                 if (back) {
    
14.                         uni.navigateBack();
    
15.                 }
    
16.         },

复制代码