关于uniapp的vue2.x版本的路由守卫拦截方案

news2025/1/13 10:09:50

使用uni-read-pages和uni-simple-router实现,方案思路如下

首先在packge.json把下面两个依赖npm install 一下,我目前是这两个版本,别的版本号没有测试过

"dependencies": {
	  "uni-read-pages": "^1.0.5",
	  "uni-simple-router": "^2.0.5"
  }

然后再再根目录下面创建一个vue.config.js

代码如下

//vue.config.js
const TransformPages = require('uni-read-pages')
const {webpack} = new TransformPages()
module.exports = {
	configureWebpack: {
		plugins: [
			new webpack.DefinePlugin({
				ROUTES: webpack.DefinePlugin.runtimeValue(() => {
					const tfPages = new TransformPages({
						includes: ['path', 'name', 'aliasPath','meta']
					});
					return JSON.stringify(tfPages.routes)
				}, true )
			})
		]
	}
}

然后根目录创建一个index.js(这里应该也可以创建目录router/index.js,我没有试过,感兴趣的自己可以试一下)

// router.js
import {RouterMount,createRouter} from 'uni-simple-router';

const scrollInfo={};

const router = createRouter({
	platform: process.env.VUE_APP_PLATFORM,  
	routes: [...ROUTES],
	h5:{
		scrollBehavior:(to, from, savedPosition)=>{
			const XY=scrollInfo[to.path];
			if(XY){
				return XY;
			}
			return savedPosition;
		}
	}
});
//全局路由前置守卫
router.beforeEach((to, from, next) => {
	
	console.log("跳转前");
	next();
});
// 全局路由后置守卫
router.afterEach((to, from) => {
    console.log('跳转结束')
})

export {
	router,
	RouterMount
}

然后main.js里面加入如下代码

import Vue from 'vue'
import App from './App'
import {router,RouterMount} from './router.js'  //路径换成自己的
Vue.use(router)




Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue({
    ...App,
})

//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式-----这一步很重要,
// #ifdef H5
	RouterMount(app,router,'#app')
// #endif
app.$mount()

其他的不用做任何改动,然后控制台就可以打印出来啦

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1968560.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

matplotLib在图中标出最后一个点的值

import matplotlib.pyplot as plt import numpy as np# 生成100个随机数据 data np.random.rand(100)# 绘制数据 plt.plot(data, labelData Points)# 获取最后一个数据点的位置和值 last_x len(data) - 1 last_y data[-1]# 用红圈标出最后一个点 plt.plot(last_x, last_y, r…

《动手做科研》09. 万事具备,只欠行动

地址链接:《动手做科研》09. 万事具备,只欠行动 欢迎加入我的知识星球,定期分享AI论文干货知识! 导读: 当你坚持学习到这一步,并且之前的内容都有跟着操作,那么恭喜你,你已经在脑力层面消化了最难的知识&am…

AI表情神同步!LivePortrait安装配置,一键包,使用教程

快手在AI视频这领域还真有点东西,视频生成工具“可灵”让大家玩得不亦乐乎。 现在又开源了一款超好玩的表情同步(表情控制)项目。 一看这图片,就知道是小视频平台出的,充满了娱乐性。发布没几天就已经有8000Star。 项…

7月Langchain-Chatchat 0.3.1最新 win系统-安装教程,踩坑2小时,5分钟拿去!

Win11安装 langchain-chatchat 0.3.1最新版 1. 虚拟环境安装和python包安装 conda create -n chat310 python3.10#这里很重要 需要先安装cuda版本的torch pip install torch2.3.1 torchvision0.18.1 torchaudio2.3.1 --index-url https://download.pytorch.org/whl/cu121pip…

六种方法实现Python文件之间的互动!

一、exec() 首先,我们生成一个名为**“file1.py”的python文件**: # file1.py print("Hello from file1!")然后,再生成一个名为“main.py”的python文件: # main.py filename file1.py with open(filename) a…

vlunstack-1(横向,phpmyadmin拿shell,xycms拿shell,cs和msf联动)

Vulnstack-1 内网环境搭建 环境配置: 靶机介绍 包括win7的web端,还有win2003为域成员,域控为win2008 win7内网ip:192.168.157.153 外网ip:192.168.52.143 域成员 win2003 ip 192.168.52.141 域控 win2008 ip 192.168…

基于WEB的仓库管理系统的设计与实现

点击下载源码 基于WEB的仓库管理系统的设计与实现 摘 要 仓库物品的管理是与我们的日常生活息息相关的一个重大问题。随着我国经济飞速的发展,改革开放的不断深入,企业要想在激烈的市场竞争中立于不败之地,要想继续的发展与生存&#xff0…

IDEA报错无效的目标发行版:17

问题描述:由于要接手另外一个项目,之前项目用的jdk17,新项目用的jdk8。需要切换jdk,idea切换之后启动报错 检查之后发现是没切换完全,一共需要切换如下几个地方: 切换前提:电脑上安装了多个版本…

八戒会修特斯拉 气囊电脑 rcm故障代码RCM2_a442_presFrntRDoorOpen

--------------------------------------------------------------------------------------------------------------------------------- -------------------------------------- 作者: 八戒会修特斯拉 -------------------------…

手机在网状态接口如何对接?(一)

一、什么是手机在网状态? 传入手机号码,查询该手机号的在网状态,返回内容有正常使用、停机、在网但不可用、不在网(销号/未启用/异常)、预销户等多种状态。 二、手机在网状态使用场景? 1.信贷审核&#…

MySQL是怎样运行的——第2章 启动选项和系统变量

文章目录 2.1 在命令行上使用选项2.1.1 选项的长形式和短形式 2.2 配置文件中使用选项2.2.1 配置文件的路径2.2.2 配置文件的内容2.2.3 配置文件的优先级 2.3 命令行和配置文件中启动选项的区别2.4 系统变量2.4.1 简介2.4.2 查看系统变量2.4.3 设置系统变量2.4.4 启动选项和系统…

Java原生序列化与反序列化、URLDNS

配套课件地址:https://blog.csdn.net/mocas_wang/article/details/10762101 1. 概述 1.1 序列化与反序列化 序列化是指把Java代码转化为字节序列的过程;而反序列化时指把字节序列恢复为Java对象的过程。序列化分为两大部分:序列化和反序列化…

mindspore框架实现ckpt模型导出ONNX格式

mindspore框架保存及加载模型 详细流程:昇思-保存及加载模型 关键步骤 关键代码 from mindspore import export, load_checkpoint, load_param_into_net from mindspore import Tensor import numpy as np from MobileNet2GarbageCls.MobileNetv2 import *# 有…

第二证券:商业航天概念再活跃,航天晨光5连板,航新科技等涨停

商业航天概念1日盘中再度活跃,到发稿,航新科技、春晖智控“20cm”涨停,航天雄图涨超10%,航天长峰、航天晨光、星网宇达、航天科技、航天展开等均涨停,航宇微涨近10%。 值得注意的是,航天晨光已接连5个交易…

如何对同一个项目,不同分支,开两个IDEA窗口?

问题:有次我想参考(fu zhi)某个分支的代码,来写代码,但是打开双击项目的pom文件,会自动打开现在的IDEA窗口,如下: 解决:后面我用Open的方式打开,也是一样的。…

免费【2024】springboot 大棚蔬菜管理系统的设计与实现

博主介绍:✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围:SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…

【漏洞复现】万户 ezOFFICE协同管理平台 getAutoCode SQL注入

文章目录 0x00 漏洞描述影响范围 0x01 测绘工具0x02 漏洞复现0x03 Nuclei检测脚本0x04 修复建议0x05 免责声明 0x00 漏洞描述 万户OA ezofice是万户网络协同办公产品多年来一直将主要精力致力于中高端市场的一款OA协同办公软件产品,统一的基础管理平台,实现用户数据…

Thread-Caching Malloc 简介

文章目录 Google的tcmalloc(Thread-Caching Malloc)简介主要特点工作原理应用场景安装与配置 总结 🎖 博主的CSDN主页:Ryan.Alaskan Malamute 📜 博主的代码仓库主页 [ Gitee ]:ryanala [GitHub]&…

第十三章 数据质量

本章重点内容: 1.重要的数据先开始处理 2.要知道PDCA(计划-执行-检查-行动) 3.知道数据质量的评估维度 4.进行根因分析以找出数据质量问题的根源 5.数据质量报告 1. 概述 与数据治理和整体数据管理一样,数据质量管理不是一个…

031-GeoGebra中级篇-GeoGebra的布尔值

在 GeoGebra 中,布尔值和条件判断是实现动态数学模型和交互式几何图形的重要工具。布尔值,即逻辑值,只有两个可能的取值:真(True)或假(False)。通过使用布尔值,我们可以创…