uniapp-页面跳转和路由使用

在uniapp开发过程之中，我们经常会遇到需要进行页面跳转和页面传参的需求，这个时候如何解决呢，接下来我们就看看在页面的过程之中如何进行使用

跳转到 tabBar 页面只能使用 switchTab 跳转

1、uni.navigateTo

先来看看官方解释：保留当前页面，跳转到应用内的某个页面

简单说：就是跳转非 tabBar 的页面呗（tabar就是你下面的那几个小页面）

普通使用方法

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
	url: '/pages/test'
});

携带参数跳转

如果我们想要携带一些参数呢

uni.navigateTo({
   url: '/pages/test?id=1&name=uniapp'
});

接收参数

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

注意点

url有长度限制，太长的字符串会传递失败

跳转到 tabBar 页面只能使用 switchTab 跳转

vue3使用接收参数

存储

在vue3 之中想要传递参数，第一种方法就是使用存储这种类似的

uni.setStorageSync('userId','11');  //存储
uni.getStorageSync('userId'); //获取

使用

在setup语法糖下获取路由跳转传递的参数的方式 用props去接收

// 在起始页面传递参数 
uni.navigateTo({
  url: '/pages/component/userinfo/userinfo?userId=' + userId
});

//在test.vue页面接受参数
<template>
  <view>
    <text>UserId: {{ userId }}</text>
  </view>
</template>

<script setup>
// 使用 defineProps 来定义 props
const props = defineProps({
  userId: {
    type: String,
    required: true,
  }
});
</script>

2、uni.redirectTo

跳转并携带参数

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

接受参数

export default {
	onLoad: function (option) {
		console.log(option.id);
	}
}

3、uni.reLaunch

uni.reLaunch可以关闭所有页面，然后打开到应用内的某个页面

跳转并携带参数

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

接受参数

export default {
	onLoad: function (option) {
		console.log(option.id);
	}
}

4、uni.switchTab

需要注意，这个方法其实就是上面我说的那几个菜单tab栏目的

作用就是跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

比如我们pages.json页面是这么写的

{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}

我们使用的时候就是这样子的

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

5、uni.navigateBack

它的作用就是关闭当前页面，返回上一页面或多级页面，当我们需要返回几层的时候，可以通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

使用uni.navigateBack可以返回到原页面

（1）uni.navigateBack 返回

进去页面触发
onShow(async () => {
	getList(1); //利用学员编号进行展示
})

uni.navigateBack({  
//uni.navigateTo跳转的返回，默认1为返回上一级
	delta: 1
});

uni.redirectTo({
    url: '/pages/component/register/index'
});

（2）跳转方式对比

简单对比看看我们在几个页面跳转时候的方式

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
	url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
	url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
	delta: 2
});

6、getCurrentPages的使用（uniapp监听从哪个页面来）

当我们在uniapp之中需要监听从哪个页面来的时候

var pages = getCurrentPages();//获取页面
var beforePage = pages[pages.length - 2];//上个页面
if(beforePage.route=='pages/component/myreport/index'){
    // 进行对应的操作 
}

配合我们的返回进行使用

uniapp监听页面顶部导航栏返回事件

<u-navbar title="测试" :custom-back="customBack"></u-navbar>
 methods: {
    customBack() {
      let routes = getCurrentPages()
      let lastPage = routes[routes.length - 2].route 
      // 页面栈中的最后一个项为当前页面，route属性为页面路径
      console.log(lastPage, 'routes')
      if (lastPage === 'pagesMine/pages/equityCard/myCard') {
        uni.navigateBack()
      } else {
        uni.navigateBack({
          delta: 2,
        })
      }
    }
  },

getCurrentPages().length // 监听是否是返回来的 在onShow生命周期函数中判断是否是通过左上角返回按钮返回的

getCurrentPages().length

大于1，则表示当前页面不是第一个页面，即用户是通过返回按钮返回的；

否则表示当前页面是第一个页面，即用户是通过路由跳转进入的。