web学习笔记(六十五)
目录
1. Hash模式和History模式
2. 导航守卫
3. 路由元信息
4.路由懒加载
1. Hash模式和History模式
Hash模式(哈希模式)和History模式(历史模式)是匹配路由的两种模式,一般默认配置Hash模式,可以在index.js页面中将路由匹配的模式换为哈希模式
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
// 使用哈希模式需要导入createWebHashHistory
import HomeView from '../views/HomeView.vue'const router = createRouter({// 历史模式history: createWebHistory(import.meta.env.BASE_URL),// 哈希模式history: createWebHashHistory(import.meta.env.BASE_URL),routes: [{path: '/router',name: 'router',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import('../views/routerview.vue')}]
});
哈希模式和历史模式的区别:
- 哈希模式下地址栏中有#号标识,历史模式下则没有#号标识,但两者的传参方式是一样的
- 在项目打包之前,我们在开发者模式下是观察不到哈希模式和历史模式的区别的,但是当项目打包后我们会发现当我们尝试进入一个不存在的页面时,历史模式会向后端发送请求,因为浏览器没有匹配到路由组件,所以向服务器发送请求页面去了,这种情况下控制台会出现404报错,要想让控制台不报错得加后端配置,如果服务器不存在这个地址就把原页面返回,不要出现404错误,而哈希模式就不会出现这个问题,因为他有#表示,浏览器不会当成url向服务器请求的。
2. 导航守卫
导航守卫就是路由跳转中的一个拦截器。全局前置守卫:所有路由跳转前都会先经过这个守卫的拦截。beforeEach内部返回false表示不同意跳转;返回true同意跳转。
router.beforeEach((to, from,next) => {// to:目的地页面路由 from:当前要切换的路由// 返回false以取消导航// 一般需要授权验证的页面才需要拦截,其他页面直接放行。if (to.path == '/about') {if (localStorage.getItem('token')) next();//已登录,允许跳转else {console.log('请先登录');next(`/login?target=${to.path}`)//跳转登录页面}}// return falseelse {next();//使用了next参数就不再使用返回值true/false来决定是否跳转。因为next()不带参数等价于return true,允许跳转}// 保证任意条件下next只执行一次 })
3. 路由元信息
在 Vue Router 中,路由元信息(Route Meta Fields)是一种用于给路由添加额外信息的方式。通过路由元信息,我们可以为每个路由定义一些自定义的数据,这些数据可以在路由导航守卫和组件中访问,从而实现更灵活的路由控制和处理。我们可以将自定义的数据写道 meta里面。
routes: [{path: '/',name: 'home',component: HomeView,// meta自定义路由参数只能写在这里面meta: {// 路由元信息,主要是给路由设置自定义参数。isAuth:true,}}]
可以用来认证进入该页面是否需要登录,给需要登陆的页面都加上isAuth,然后在导航守卫中通过isAuth来判断。
4.路由懒加载
主要用来优化代码体积,当我们使用npm run build命令将项目打包放到服务器时,使用路由懒加载来优化代码体积可以提高用户的体验,
之前我们导入组件使用的都是同步导入的方式,在首次加载页面时,这些组件内容都一并被浏览器加载了,当入口js文件体积变大时,浏览器加载和解析的速度就会变慢,首屏加载时间就会延长,用户体验不好,可能会长时间处于白屏阶段。
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'const router = createRouter({// 历史模式history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: HomeView,// meta自定义路由参数只能写在这里面}]
});export default router
但是现在我们可以使用路由的懒加载来导入组件,将每一个组件单独打包一个js/css文件,当用户访问路由了,再加载对应的 js文件,减轻了入口js的代码体积,解析和加载速度就快了,首屏加载事件也缩短了,从而提高用户的体验。
{path: '/router',name: 'router',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import('../views/routerview.vue')}
相关文章:

web学习笔记(六十五)
目录 1. Hash模式和History模式 2. 导航守卫 3. 路由元信息 4.路由懒加载 1. Hash模式和History模式 Hash模式(哈希模式)和History模式(历史模式)是匹配路由的两种模式,一般默认配置Hash模式,可以在in…...

66. UE5 RPG 实现远程攻击武器配合角色攻击动画
在制作游戏中,我们制作远程攻击角色,他们一般会使用弓箭,弩,弹弓等武器来进行攻击。比如你使用弓箭时,如果角色在播放拉弓弦的动画,但是弓箭武器没有对应的表现,会显得很突兀。所以,…...
用 Python 编写自动发送每日电子邮件报告的脚本,并指导我如何进行设置
编写一个自动发送每日电子邮件报告的脚本涉及几个步骤。我们需要使用 Python 编写脚本,并使用一些库来发送电子邮件。下面是一个示例脚本和设置步骤。 第一步:安装必要的库 我们需要安装 smtplib 和 email 库。可以通过以下命令安装: pip …...

AI大模型的战场:通用与垂直的较量
目录 AI大模型的战场:通用与垂直的较量 1.引言 2.通用大模型的优势 2.1 概念 2.2 谷歌的BERT模型 2.3 OpenAI的GPT模型 2.4 微软的Visual Studio Code 2.5 结论 3.垂直大模型的崛起 3.1 概念 3.2 医疗影像分析的AI模型 3.3 自动驾驶领域的AI模型 3.4 金…...

单目标应用:基于人工原生动物优化器APO的微电网优化(MATLAB代码)
一、微电网模型介绍 微电网多目标优化调度模型简介_vmgpqv-CSDN博客 参考文献: [1]李兴莘,张靖,何宇,等.基于改进粒子群算法的微电网多目标优化调度[J].电力科学与工程, 2021, 37(3):7 二、人工原生动物优化算法求解微电网 2.1算法简介 人工原生动物优化器&am…...

USB端口管控软件|USB端口控制软件有哪些(小技巧)
USB端口管控软件成为了保障企业数据安全的重要手段。 本文将为您介绍几款知名的USB端口控制软件,并分享一些实用的小技巧,帮助您更好地管理US端口,确保企业信息安全。#usb接口# 一、USB端口控制软件推荐 1,域智盾 域智盾是一…...

CorelDRAW2024官方最新中文破解版Crack安装包网盘下载安装方法
在设计的世界里,软件工具的更新与升级总是令人瞩目的焦点。近期,CorelDRAW 2024中文版及其终身永久版的发布,以及中文破解版Crack的出现,再次掀起了设计圈的热潮。对于追求专业精确的设计师而言,了解这些版本的下载安装…...

Mysql学习(八)——多表查询
文章目录 五、多表查询5.1 多表关系5.2 多表查询概述5.3 内连接5.4 外连接5.5 自连接5.6 联合查询5.7子查询5.8 总结 五、多表查询 5.1 多表关系 概述:项目开发中,在进行数据库表结构设计时,会根据业务需求及业务模块之间的关系,…...

LabVIEW进行图像拼接的实现方法与优化
在工业检测和科研应用中,对于大尺寸物体的拍摄需要通过多次拍摄后进行图像拼接。LabVIEW 作为强大的图形化编程工具,能够实现图像拼接处理。本文将详细介绍LabVIEW进行图像拼接的实现方法、注意事项和提高效率的策略。 图像拼接的实现方法 1. 图像采集…...

纷享销客安全体系:安全合规认证
安全合规认证是指组织通过独立的第三方机构对其信息系统和数据进行评估和审查,以确认其符合相关的安全标准、法律法规和行业要求的过程。 安全合规认证可以帮助组织提高信息系统和数据的安全性,并向客户、合作伙伴和监管机构证明其符合相关的安全标准和…...

推荐这两款AI工具,真的很好用
巨日禄 巨日禄是一款由杭州巨日禄科技有限公司开发的AI工具,主要功能是将文本内容转换为视频。该工具通过分析大量的剧本数据和影视作品,为用户提供各种类型的故事情节和角色设置,帮助用户快速找到灵感,减少构思剧本的困难和犹豫。…...
装饰器在实际开发中的作用
首先先说说装饰器的整体优点。 使用装饰器可以实现代码的模块化、可重用性。当需要对多个函数进行相同的功能增强时,通过装饰器可以避免重复代码的编写,提高开发效率。 1、权限检查:通过装饰器可以在函数执行之前检查用户权限,决…...

JVM学习-监控工具(三)
jconsole 从Java5开始,在JDK中自带的java监控和管理控制台用于对JVM中内存、线程、和类等的监控,是一个基本JMX(java management extendsions)的GUI性能监控工具 三种连接方式 Local:使用JConsole连接是一个正在本地系统运行的JVM…...
GPU显卡计算能力怎么算?
GPU的算力指的是什么? GPU的计算能力可以使用FLOPS表示,FLOPS是floating-point operations per second的缩写,表示“每秒所执行的浮点运算次数”。是被用来估算处理的计算能力 1 MFLOPS 每秒可以执行一百万(10^6)次浮点运算 1 GFLOPS 每秒可以执行十…...

Spark参数配置不合理的情况
1.1 内存设置 💾 常见的内存设置有两类:堆内和堆外 💡 我们作业中大量的设置 driver 和 executor 的堆外内存为 4g,造成资源浪费 📉。 通常 executor 堆外内存在 executor.cores1 的时候,1g 足够了&…...

【OpenGL学习】OpenGL不同版本渲染管线汇总
文章目录 一、《OpenGL编程指南》第6版/第7版的渲染管线二、《OpenGL编程指南》第8版/第9版的渲染管线 一、《OpenGL编程指南》第6版/第7版的渲染管线 图1. OpenGL 2.1、OpenGL 3.0、OpenGL 3.1 等支持的渲染管线 二、《OpenGL编程指南》第8版/第9版的渲染管线 图2. OpenGL …...
等保测评练习
等级保护初级测评师试题11 姓名: 成绩: 判断题(10110分) 1. windows使用"service -status-all | grep running"命令查看危险的网络服务是否已经关闭。( F ) …...

第十五届蓝桥杯大赛 国赛 pb组F题【括号与字母】(15分) 栈的应用
博客主页:誓则盟约系列专栏:IT竞赛 专栏关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞👍收藏⭐评论✍ 试题F:括号与字母 【问题描述】 给定一个仅包含小写字母和括号的字符串 S …...
MYSQL 三、mysql基础知识 4(存储过程与函数)
MySQL从5.0版本开始支持存储过程和函数。存储过程和函数能够将复杂的SQL逻辑封装在一起,应用程序无须关注存储过程和函数内部复杂的SQL逻辑,而只需要简单地调用存储过程和函数即可。 一、存储过程概述: 1.1理解: 含义&am…...

鸿蒙开发文件管理:【@ohos.statfs (statfs)】
statfs 该模块提供文件系统相关存储信息的功能,向应用程序提供获取文件系统总字节数、空闲字节数的JS接口。 说明: 本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。 导入模块 import stat…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...

【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
LangFlow技术架构分析
🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架:基于 (一个现代化的 React 节点绘图库) 功能: 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...
HTML前端开发:JavaScript 获取元素方法详解
作为前端开发者,高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法,分为两大系列: 一、getElementBy... 系列 传统方法,直接通过 DOM 接口访问,返回动态集合(元素变化会实时更新)。…...

GraphQL 实战篇:Apollo Client 配置与缓存
GraphQL 实战篇:Apollo Client 配置与缓存 上一篇:GraphQL 入门篇:基础查询语法 依旧和上一篇的笔记一样,主实操,没啥过多的细节讲解,代码具体在: https://github.com/GoldenaArcher/graphql…...

Java数组Arrays操作全攻略
Arrays类的概述 Java中的Arrays类位于java.util包中,提供了一系列静态方法用于操作数组(如排序、搜索、填充、比较等)。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序(sort) 对数组进行升序…...

Linux基础开发工具——vim工具
文章目录 vim工具什么是vimvim的多模式和使用vim的基础模式vim的三种基础模式三种模式的初步了解 常用模式的详细讲解插入模式命令模式模式转化光标的移动文本的编辑 底行模式替换模式视图模式总结 使用vim的小技巧vim的配置(了解) vim工具 本文章仍然是继续讲解Linux系统下的…...

欢乐熊大话蓝牙知识17:多连接 BLE 怎么设计服务不会乱?分层思维来救场!
多连接 BLE 怎么设计服务不会乱?分层思维来救场! 作者按: 你是不是也遇到过 BLE 多连接时,调试现场像网吧“掉线风暴”? 温度传感器连上了,心率带丢了;一边 OTA 更新,一边通知卡壳。…...