uniapp+TS封装路由跳转及拦截器

前言

uniapp是路由就是一个组件或者页面的路径，每次跳转需要调用官方提供的方法，不方便使用，而且不能统一实现某些功能。 本次封装，我们可以实的功能：

1.添加路由白名单。

2.限制某些页面的访问。

3.统一传递参数

为了方便大家的理解，假如当前有这几个页面：

1. /pages/login/login

2. /pages/goods/goods

3. /pages/goods/goods-detail

准备

安装 queryString插件，对参数进行序列化

//npm
npm i query-string

//yarn
yarn add query-string

封装

pagePath是跳转的路径。

param是传递的参数，它可以是字符串，也可以是一个对象.

withePageList路由白名单，没有登录也可以访问的页面

useUserStatus是从本地获取token,如果本地没有token，说面该用户没有登录返回false,反之返回true

cleanEmptyKey是自己封装的删除无意义的key方法。比如有的key，value是‘’或者空对象。

import { stringify } from 'query-string'


// 路由白名单，没有登录也可以访问的页面
const withePageList = [
  '/pages/login/login',
  '/pages/goods/goods'
]

export const goPage = (pagePath: string, param?: string | Record<string, any>) => {

  // 拦截器, 没有登录,并且没有在白名单的页面都跳转登录页面
  if (!useUserStatus() && !withePageList.includes(pagePath)) {
    showMeg('请先登录')
    uni.navigateTo({
        url: '/pages/login/login'
    })
    return
  }
  
  //判断用户是否传递参数
  let tempUlr = ''
  if (typeof param === 'string') {
    tempUlr = param
  } else {
    tempUlr = stringify(cleanEmptyKey(param ?? {}))
  }
  
  //最终指定页面
  uni.navigateTo({
    url: pagePath + '?' + tempUlr
  })
}

使用

通过上面的封装，我们以后再跳转页面传递数据就会简单很多。一句代码就可以搞定

import { goPage } from "xxx"
const goodsUrl = '/pages/goods/goods-detail'
const userInfo = {id: 001, name: Tom}

goPage(goodsUrl, userInfo)

如果这篇文章对你有帮助，欢迎点赞留言，一起讨论！