uniapp 跳转页面保存和刷新 拦截器的使用

项目需要在 tab 导航切换的时候，不刷新列表，正常使用，在帖子列表页的时候，我们点击帖子详情，跳转回来还是不刷新。

保存

tab页我们正常配置使用就好，我们跳转去详情和使用：

			detail(item) {
				uni.navigateTo({
					url: "./postDetail?id=" + item.id
				})
			},

不关闭当前页，并跳转，我们返回的时候使用：

				uni.navigateBack({
					delta: 1
				})

或者直接使用uniapp 里的头部导航栏的返回按钮。

刷新

现在有新的需求，我们再详情页也能会删除属于自己的帖子，这样我们返回上一级的时候就需要刷新列表数据，有一个比较好的交互

跳转详情还是同上即可，这样只需要修改比较少的代码

我们跳转返回的时候使用：

uni.switchTab({
    url: '/pages/technical_skills/index',
    success(){
        let page = getCurrentPages().pop(); //跳转页面成功之后
        if (!page) return; 
            page.onLoad(); //如果页面存在，则重新刷新页面
        }
});

在 跳转 的回调 success 中重新刷新该页面，来达到刷新数据的效果。

注：只能跳转到 tabBar 页面，并会关闭其他所有非 tabBar 页面。如果页面调用了 uni.preloadPage(OBJECT) (opens new window)不会关闭，仅触发生命周期 onHide

拦截器

可能大家会想到路由守卫，但是在uniapp 是使用拦截器代替：

需要拦截的跳转

let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"];

添加拦截

list.forEach(item => { //用遍历的方式分别为4个路由方法添加拦截器
		uni.addInterceptor(item, {...})
    })

{}中的参数

参数名	类型	必填	默认值	说明	平台差异说明
invoke	Function	否		拦截前触发
success	Function	否		成功回调拦截
fail	Function	否		失败回调拦截
complete	Function	否		完成回调拦截

例子：

uni.addInterceptor('xxxxxx', {
  invoke() {
  },
  success() {
  }, 
  fail() {
  }, 
  complete() {
  }
})

但是这个方法也是没有vue中路由守卫那么灵活，可以给每个页面设置了

参考文档：uni.addInterceptor(STRING, OBJECT) | uni-app官网 (dcloud.net.cn)