/**vue2
import addInterceptor from '@/addInterceptor.js'
addInterceptor((to, from, next)=>{
console.log(to, '----to----')
console.log(from, '----from----')
next()//继续跳转
next(()=>{//重定向跳转
uni.navigateTo({
url:'/pageA/home/info?b=b100'
})
})
},{
global:Vue,//全局的
globalObject:Vue.prototype,
routerVariable:['path','meta','name','needLogin'],//路由展示的参数
indexPath:'/pages/index/index'//默认的首页
})
// 页面获取信息:
this.$Route
***/
/**vue3
import addInterceptor from '@/addInterceptor.js'
addInterceptor((to, from, next)=>{
console.log(to, '----to----')
console.log(from, '----from----')
next()//继续跳转
next(()=>{//重定向跳转
uni.navigateTo({
url:'/pageA/home/info?b=b100'
})
})
},{
global:app,//全局的
globalObject:app.config.globalProperties,
routerVariable:['path','meta','name','needLogin'],//路由展示的参数
indexPath:'/pages/index/index'//默认的首页
})
// 页面获取信息:
import {getCurrentInstance } from 'vue'
import {onLoad} from '@dcloudio/uni-app';
setup(props, context) {
const {proxy}=getCurrentInstance()
onLoad(()=>{
console.log(proxy.$Route)
})
return {
}
}
***/
import defaultPage from '@/pages.json'
export default function addInterceptor(cb, obj) {
const {
global,
routerVariable = ['path'],
indexPath,
globalObject = null
} = obj
if (routerVariable.indexOf('path') == -1) routerVariable.push('path')
const pageObject = {
id: 0
}
let isNextTo = false; //是否拦截
let toType = '' //拦截类型
let toDdteil = {} //拦截的具体信息
let setTimeoutL = null
const {
routerArray,
tabBarList
} = getRouterArray() //路由信息
// 挂载统一方法
global.mixin({
onShow() {
pageObject.id = new Date().getTime() + '_' + parseInt(Math.random() * 10000)
}
})
if (globalObject) {
// 获取页面
globalObject.$Route = {}
Object.defineProperty(globalObject, '$Route', {
get() {
const pages = getCurrentPages();
let thisPage = null
let lastPage = {}
try {
// #ifdef H5
lastPage = pages[pages.length - 1]
thisPage = lastPage ? (lastPage.__page__ || {
fullPath: lastPage.$page.fullPath
}) : {
fullPath: indexPath
}
// #endif
// #ifndef H5
lastPage = pages[pages.length - 1]
thisPage = {
fullPath: lastPage.$page ? lastPage.$page.fullPath : indexPath
}
// #endif
} catch (e) {
thisPage = {
fullPath: indexPath
}
}
const thisObj = getUrlData(thisPage.fullPath)
const toData = routerArray.find(n => n.path == thisObj.url)
toData.query = thisObj.obj
return toData
}
})
}
// callback
function cbFn(toDetail, fromDetail) {
toDetail.path = toDetail.path.slice(0, 1) != '/' ? ('/' + toDetail.path) : toDetail.path;
fromDetail.path = fromDetail.path.slice(0, 1) != '/' ? ('/' + fromDetail.path) : fromDetail.path;
const toObject = routerArray.find(n => n.path == toDetail.path);
if (tabBarList.indexOf(toDetail.path) != -1) {
toObject.isTabBar = true
}
const fromObject = routerArray.find(n => n.path == fromDetail.path);
if (tabBarList.indexOf(fromDetail.path) != -1) {
fromObject.isTabBar = true
}
cb(Object.assign({}, toDetail, toObject), Object.assign({}, fromDetail, fromObject), next)
}
// 继续跳转
function next(toPage=null){
if(toPage){
// #ifdef H5
if(!isNextTo){
history.back()
}
// #endif
setTimeout(()=>{
toPage()
},0)
}else{
isNextTo=true
if(toType!=''){
setTimeout(()=>{isNextTo=false},100)
}else{
isNextTo=false
}
}
}
// 获取当前页面信息
function thisPageFn(type = 0) {
return new Promise((r, _) => {
const pages = getCurrentPages();
let prvPage = null
let lastPage = {}
try {
// #ifdef H5
lastPage = pages[pages.length - 1]
prvPage = lastPage ? (lastPage.__page__ || {
url: lastPage.$page.fullPath
}) : {
url: indexPath
}
// #endif
// #ifndef H5
lastPage = pages[pages.length - 1]
prvPage = {
url: lastPage.$page ? lastPage.$page.fullPath : indexPath
}
// #endif
} catch (e) {
prvPage = {
url: indexPath
}
}
if (type == 0) {
pageObject.prvPage = prvPage
r(true)
} else {
r(prvPage)
}
})
}
// 获取页面路由
function getRouterArray() {
const {
pages,
subPackages,
tabBar
} = defaultPage;
const routerArray = [];
function forFn(pageArray, root = '') {
pageArray.forEach(item => {
const itemObje = {};
routerVariable.forEach(ele => {
if (item[ele]) {
itemObje[ele] = ele == 'path' ? (root + '/' + item[ele]) : item[ele]
}
});
routerArray.push(itemObje)
})
}
forFn(pages);
subPackages.forEach(item => {
forFn(item.pages, '/' + item.root)
});
let tabBarList = tabBar ? tabBar.list : [];
tabBarList = tabBarList.map(item => '/' + item.pagePath);
return {
routerArray,
tabBarList
}
}
// 获取参数
function getUrlData(url, variable) {
let urlValue = url;
if (urlValue == '/') {
urlValue = indexPath
}
if (!urlValue || urlValue == '') return;
var vars = [];
var queryArray = urlValue.split('?');
var query = queryArray.length > 1 ? queryArray[1] : '';
vars.push(...query.split('&'));
vars = vars.filter(n => n != '');
const queryObject = {};
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
queryObject[pair[0]] = pair[1]
}
if (variable) {
if (queryObject[variable] && queryObject[variable] != '') {
return {
url: queryArray[0],
obj: queryObject[variable]
}
} else {
return false
}
} else {
return {
url: queryArray[0],
obj: queryObject
}
}
}
// 监听APi跳转
function watchRouter(res, type) {
toType = type
toDdteil = res
const pages = getCurrentPages();
let thisPage = pages[pages.length - 1]
let to = res
let from = {}
// #ifdef H5
from = thisPage.__page__ || {
url: thisPage.$page.fullPath
}
// #endif
// #ifndef H5
try {
from = {
url: thisPage.$page.fullPath
}
} catch (e) {
from = {
url: indexPath
}
}
// #endif
if (type == 'navigateBack' || res.from == "backbutton") {
let num = 1
if (toDdteil.from == "backbutton") {
num = 1
}
if (toDdteil.delta) {
num = toDdteil.delta
}
// #ifdef H5
to = pages[pages.length - (1 + num)].__page__ || {
url: pages[pages.length - (1 + num)].$page.fullPath
}
// #endif
// #ifndef H5
to = {
url: pages[pages.length - (1 + num)].$page.fullPath
}
// #endif
}
const toDetail = {
path: to.route || getUrlData(to.url).url,
query: to.options || getUrlData(to.url).obj
}
const fromDetail = {
path: from.route || getUrlData(from.url).url,
query: from.options || getUrlData(from.url).obj
}
cbFn(toDetail, fromDetail)
}
// 监听url变化,非api跳转
Object.defineProperty(pageObject, 'id', {
set(newValue) {
if (setTimeoutL) clearTimeout(setTimeoutL)
setTimeoutL = setTimeout(async () => {
try {
if (!isNextTo) {
const pages = getCurrentPages();
let thisPage = null
// #ifdef H5
thisPage = pages[pages.length - 1].__page__ || {
url: pages[pages.length - 1].$page.fullPath
}
// #endif
// #ifndef H5
thisPage = {
url: pages[pages.length - 1].$page.fullPath
}
// #endif
const toDetail = {
path: thisPage.route || getUrlData(thisPage.url).url,
query: thisPage.options || getUrlData(thisPage.url).obj
}
if (!pageObject.prvPage
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
uniapp路由拦截 - 主要通过`uni.addInterceptor`api进行路由拦截 - 目前小程序上面对于uniapp提供的路由跳转方式可以实现拦截,自带的返回按钮,底部tabbar切换无法拦截他们的跳转,但是可以监听到to和from - h5支持路由全部拦截 - 支持vue2、vue3 - 通过`this.$Route`或者`const {proxy}=getCurrentInstance();proxy.$Route`可以拿到当前页面的路由信息 - 目前测试了h5、微信小程序、支付宝小程序、抖音小程序。其他的待测试
资源推荐
资源详情
资源评论











格式:pdf 资源大小:52.4KB 页数:2

格式:pdf 资源大小:27.5KB 页数:1
















收起资源包目录




共 3 条
- 1

寒墨茗殇
- 粉丝: 155
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 基于计算机软件工程的数据库编程技术.docx
- 大数据技术对城市商业银行小微企业授信评审的作用.docx
- 工程项目业主方项目管理.docx
- 物联网联手大数据.docx
- 中小企业网络管理员实用教程(3).ppt
- 基于大数据的公共资源交易监管方式研究.docx
- 通信与广电管理与实务综合案例二.doc
- AIoT赋能办公大数据企业员工双受益.docx
- 软件开发所需要的三种人.doc
- 互联网+背景下中医药学基础课程思政教育实施策略.docx
- 动态网页方案设计书ASP.doc
- 信贷登记咨询系统建设银行接口系统修改升业务需求.doc
- PPT模板:互联网创新科技年度工作报告商业计划书宣传.pptx
- 申报电子商务重点项目情况书面说明(格式).doc
- 施工项目管理中的风险管理应用.docx
- 产品设计课程传统教学模式缺陷及信息化教学价值分析.docx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈



安全验证
文档复制为VIP权益,开通VIP直接复制

- 1
- 2
前往页