uni-app有没有监听路由的方法，类似于vue的路由导航守卫
类似于这样的：
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
2***@qq.com
- 发布：2019-02-24 16:56
- 更新：2023-07-12 11:41
- 阅读：41109
uni-app有没有监听路由的方法，类似于vue的路由导航守卫
分类：uni-app
不瞌睡 - 不瞌睡
uni.addInterceptor('navigateTo', {
// 页面跳转前进行拦截, invoke根据返回值进行判断是否继续执行跳转
invoke(e) {},
success(e) {
}
})
你的实际业务需求是什么，如果是想要在跳转页面前进行一些判断，如拦截跳转操作然后跳转到登录页，这样的情况需要自己封装一个公用的方法保存在一个js里，在页面引入这个js，方法里面进行判断，如果符合条件才进行正常跳转。
-
-
-
-
-
-
-
回复 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
-
-
hhyang - 如有问题，请添加QQ1606726660 备注付费咨询
如果你正在使用 vue3 + vite 请参考 uni-simple-router v3 路由、拦截、最优雅的解决方案重磅来袭，或者查看 官方文档
林上皓
好想法
2022-04-29 10:37
即时通讯开发
回复 林上皓: 试了app不行，h5可以
2023-05-11 12:14