2***@qq.com
2***@qq.com
  • 发布:2019-02-24 16:56
  • 更新:2023-07-12 11:41
  • 阅读:38814

uni-app有没有监听路由的方法,类似于vue的路由导航守卫

分类:uni-app

uni-app有没有监听路由的方法,类似于vue的路由导航守卫
类似于这样的:
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})

2019-02-24 16:56 负责人:无 分享
已邀请:
w***@qq.com

w***@qq.com

不知道符不符合需求 在app.vue里面使用watch监听$route可以监听到路由变化 踩坑

不瞌睡

不瞌睡 - 不瞌睡

uni.addInterceptor('navigateTo', {
// 页面跳转前进行拦截, invoke根据返回值进行判断是否继续执行跳转
invoke(e) {},
success(e) {
}
})

Neil_HL

Neil_HL

你的实际业务需求是什么,如果是想要在跳转页面前进行一些判断,如拦截跳转操作然后跳转到登录页,这样的情况需要自己封装一个公用的方法保存在一个js里,在页面引入这个js,方法里面进行判断,如果符合条件才进行正常跳转。

  • 5***@qq.com

    这样的话不够优雅,希望有更好的解决方案。

    2019-03-02 17:41

  • Neil_HL

    回复 5***@qq.com:暂时只能这样

    2019-03-04 10:22

  • 1***@qq.com

    回复 Neil_HL:判断跳转当前页面会出现一下

    2019-04-01 10:05

  • z***@163.com

    回复 5***@qq.com:哈哈,好一个不够优雅,您跟我一样从vue过来的,深有同感!

    2019-04-17 12:30

  • hellouniapp

    回复 z***@163.com: 我今天遇到类似的问题,真的觉得应该提供个钩子,不然这样太傻了。。。

    2019-05-12 12:15

  • z***@163.com

    回复 hellouniapp: 你说不是嘛,官方的uni.request居然没拦截器

    2019-05-20 18:52

  • silas

    回复 z***@163.com:

    自己简单封装一个


    //index.ts

    export default class Http {

    public interceptorsRequest: any

    public interceptorsResponse: any

    public config: Config = {}

    public interceptors: any = {

    request: (interceptorsRequest: any) => {

    this.interceptorsRequest = interceptorsRequest

    },

    response: (interceptorsResponse: any) => {

    this.interceptorsResponse = interceptorsResponse

    }

    }

    public request(params: Params) {

    params.headers ? params.headers = params.headers : params.headers = {}

    params = this.interceptorsRequest(params)

    if (this.config && this.config.headers) {

    if (!params.headers) {

    params.headers = {}

    }

    params.headers = Object.assign({}, params.headers, this.config.headers)

    }

    let baseURL = ''

    if (params.url && params.url.startsWith('http')) {

    baseURL = ''

    } else if (params.baseURL) {

    baseURL = params.baseURL

    } else if (this.config && this.config.baseURL) {

    baseURL = this.config.baseURL

    }

    return new Promise((resolve, reject) => {

    uni.request({

    url: baseURL + params.url,

    data: params.data,

    header: params.headers,

    method: params.method || 'GET',

    success: (res) => {

    return this.interceptorsResponse(res, params).then((res1: any) => {

    resolve(res1)

    }).catch((err: any) => {

    reject(err)

    })

    },

    fail: (err) => {

    return this.interceptorsResponse(null, params, err).then((res1: any) => {

    reject(res1)

    }).catch((err1: any) => {

    reject(err1)

    })

    }

    })

    })

    }


    public post(url: string, data?: any, config?: Params) {

    config = !config ? Object.assign({ url, data }, config) : { url, data}

    return this.request(config)

    }

    public get(url: string, config?: Params) {

    config = !config ? Object.assign({ url }, config) : { url }

    return this.request(config)

    }

    }


    interface Config {

    headers?: any,

    baseURL?: string

    }

    interface Params {

    baseURL?: string,

    url?: string,

    data?: any,

    headers?: any,

    method?: 'GET' | 'POST'

    }


    // uniHttp.ts

    import Vue from 'vue'

    import store from '@/store'

    import { getObjType, timeout } from '@/utils'

    import { showLoading, hideToast, hideLoading, showToast } from '@/utils/ui'

    import Http from '.'


    const http = new Http()

    // 设置默认请求头

    http.config.headers = {

    'Content-Type': 'application/x-www-form-urlencoded',

    'x-Agent': 'xinchidao'

    }

    // 请求超时的时间限制

    // fly.config.timeout = 15000

    const idDev = process.env.NODE_ENV === 'development'

    const isH5 = process.env.VUE_APP_PLATFORM === 'h5'

    if (idDev) {

    http.config.baseURL = 'https://demo.xxx.com'

    } else {

    http.config.baseURL = isH5 ? '/' : 'https://demo.xxx.com'

    }


    // 设置错误请求文字

    const errorMessage = '网络请求错误,请检查网络连接在重试'


    // 开始设置请求 发起的拦截处理

    // config 代表发起请求的参数的实体

    http.interceptors.request((config: any) => {

    if (store.getters.token) {

    config.headers['x-token'] = store.getters.token // 让每个请求携带自定义token 请根据实际情况自行修改

    }

    if (store.getters.sessionId) {

    config.headers.Cookie = store.getters.sessionId // 设置sessionId

    }

    if (config.method === 'post') {

    // 清除数据中的前后空格

    if (getObjType(config.data) !== 'string') {

    for (const item in config.data) {

    if (config.data[item] && typeof config.data[item] === 'string' && config.data.hasOwnProperty(item)) {

    config.data[item] = config.data[item].trim()

    }

    }

    }

    } else {

    // 清除数据中的前后空格

    if (getObjType(config.data) !== 'string') {

    for (const item in config.params) {

    if (config.params[item] && typeof getObjType(config.data) !== 'string'

    && config.params.hasOwnProperty(item)) {

    config.params[item] = config.params[item].trim()

    }

    }

    }

    }


    const time = timeout(() => {

    showLoading({ title: '数据加载中'})

    }, 1000)

    config.toast = time

    return config

    })


    // 请求到结果的拦截处理

    http.interceptors.response((res: any, config: any, err: any) => {

    // if (res.config.url.includes('m-mysql-backUp-download')) {

    // console.log('object', res)

    // }

    clearTimeout(config.toast)

    timeout(() => { hideLoading() }, 1100)

    if (!res) {

    Promise.reject(err)

    return

    }

    const code = res.data.code

    if (code !== undefined && code !== 9999) {

    let message = res && res.data.message

    if (code === 11003 || code === 11004 || code === 11006 || code === 11001) {

    message = '登录信息过期,请重新登录'

    store.dispatch('FedLogOut')

    }

    if (code === 500 && process.env.NODE_ENV !== 'development') {

    res.message = ''

    }

    if (res.optionMsg && process.env.NODE_ENV === 'development') {

    message += 【optionMsg】${res.optionMsg}

    }

    message = message || errorMessage

    setTimeout(() => {

    showToast({ title: message })

    }, 100)

    return Promise.reject(new Error(message))

    }

    return Promise.resolve(res.data)

    })

    export default http


    //使用

    import request from '@/http/uniHttp'


    export function queryParam(paramKeys: string) {

    return request.get(/api/c-sys-param-query?paramKeys=${paramKeys})

    }

    2019-05-28 15:50

  • 1***@qq.com

    回复 silas: 你是用ts写的uni?

    2019-07-31 18:25

  • 林上皓

    回复 silas: 题目是路由,你写什么请求封装?

    2019-08-16 09:36

hhyang

hhyang - 如有问题,请添加QQ1606726660 备注付费咨询

2***@qq.com

2***@qq.com

可以拦截navigateTo reLaunch redirectTo api的调用,但是没办法监测到第一次跳转进来,第一次进来因为不是直接调用的api,没法监测到;

DuD

DuD - 任何不快乐的时光都是浪费。——Any unhappy is a waste of time.

重写uni.navigateTo 完了判断当前url和导航守卫差不多了

hhyang

hhyang - 如有问题,请添加QQ1606726660 备注付费咨询

要回复问题请先登录注册