当前位置: 首页 > news >正文

Vue前端开发-路由其他配置

在路由文件中,除了跳转配置外,还可以进行路径重定向配置,如果没有找到对应的地址,还可以实现404的配置,同时,如果某个页面需要权限登录,还可以进行路由守卫配置,接下来,分别对这些配置实现的过程进行详细的介绍。

一、重定向配置

针对一些已下线的页面和错误的地址,直接访问会出现404错误异常,为了避免这种现象,通常会通过重定向配置,指向一个新的页面地址,或者跳转到首页,代码如下所示。

{path: '/error',redirect: '/list',}

上述代码添加在router配置文件夹下的index.js文件中,重定向配置通常只需要配置两个属性就可以,一个是path,表示原有访问的路径,另一个是redirect,表示重新指定的路径,这个属性接收三种类型的值,第一种是字符串型,表示新的路径地址,如上述代码所示,第二种是router对象型,在对象中可以携带参数进行跳转,代码如下所示。

{path: '/error',redirect: {name: 'list',query: {from: 'redirect',}}}

这种类型重定向后,最终跳转的地址为“http://abc.com/list?from=redirect”,通过这种携带from来源参数的方式,可以统计有多少请求来源于重定向方式。

第三种是函数型,通过函数的return 返回需要跳转的路由地址,根据这种特征,可以在函数中进行登录用户的权限判断,根据不同的权限,返回不同的路由地址,从而实现不同用户进入不同页面的效果,代码如下所示。

{path: '/error',redirect: () => {// 从当前登录用户信息中获取角色Idconst { roleId } = loginInfo// 根据不同角色进行跳转switch (roleId) {// 管理员case 1:return '/admin'// 普通用户case 2:return '/home'// 其他default:return '/login'}}}

在上述路由配置代码中,假设 loginInfo 是用户登录后的保存登录信息的对象,并且在对象中还有roleId值,则可以根据该值,确定不同的角色,跳转不同的页面。

二、404配置

并不是所有的错误访问地址都需要重定向,有时仅是针对原有的,已下架的页面地址做重定向,因为这些地址有可能是从收藏夹中直接访问的。针对那些没有重定向的地址,可以添加一个公用的404页面,如果访问出错,就直接跳转到该页面,代码如下所示。

 {path: '/:pathMatch(.*)*',name: '404',component: () => import('../views/404.vue'),}

需要说明的是:path属性中,pathMatch(.),是一个正则表达式,表示全部的路由地址,Vue 3中不再支持在路由配置中直接使用星号作为通配符,而支持在正则表达式中使用星号通配符作为参数。

三、路由守卫配置

虽然可以通过路由重定向,根据用户角色进入不同的页面,但有的页面在进入时,需要再次检测用户的登录状态,如果没有登录,则返回登录页重新再登录,如果已经登录,则可以进入下一页,这种状态的检测需要配置路由守卫。

路由守卫的配置依赖于路由对象router在生命周期中的钩子函数,router在整个执行过程中有三个钩子函数,它们的功能和执行时机如下表8-1所示:
在这里插入图片描述
在router对象的三个钩子函数中,beforeEach函数使用最为常用和简单,该函数又称为“路由拦截”,因为路由的功能是渲染指定路由地址的组件,而 beforeEach 函数可以在渲染组件之前做检测,当达到了某个条件后再做渲染,否则,跳到另一个页面中。

beforeEach 函数在路由配置文件中的使用非常简单,它有两个参数,一个是to,表示即将进入的路由对象,另一个是from,表示导航正要离开的对象,如果需要根据路由对象中的登录属性,决定是否需要进行拦截,则路由守卫的配置代码如下所示:

 router.beforeEach((to, from) => {const { isNoLogin } = to.metaif (!isNoLogin) return '/login'})

在上述代码中,如果即将进入的路由对象的isNoLogin属性值为true时,就可以直接渲染该组件,否则,跳转到登录页面,除这种方式外,还可以检测用户登录后的保存的用户信息是否存在,如果不存在,则跳转到登录页中,代码如下所示:

 router.beforeEach((to, from) => {const loginUser = localStorage.getItem("loginUser")if (!loginUser) return '/login'})

上述代码中,loginUser就是从缓存中获取的登录用户对象,如果存在,说明已登录过,否则,跳转到登录页,进行登录。
在这里插入图片描述

相关文章:

Vue前端开发-路由其他配置

在路由文件中,除了跳转配置外,还可以进行路径重定向配置,如果没有找到对应的地址,还可以实现404的配置,同时,如果某个页面需要权限登录,还可以进行路由守卫配置,接下来,分…...

框架建设实战7——定时任务组件

在金融系统中,或者其他对账系统里,往往离不开分布式定时任务。用来做查证或者重试处理。 分布式job目前一般有如下三种: 1.elastic job 当当出品,比较老牌。新公司用的应该不多了。 2.xxl-job 个人开源项目。便于二开;有简洁的后管配置界面,方便接入。 3.powerjob …...

mybatis 整合 ehcache

pom.xml <!-- ehcache依赖 --><dependency><groupId>org.mybatis.caches</groupId><artifactId>mybatis-ehcache</artifactId><version>1.1.0</version></dependency>ehcache.xml <?xml version"1.0" en…...

【PlantUML系列】用例图(三)

目录 一、组成部分 二、典型案例 一、组成部分 参与者&#xff08;Actors&#xff09;&#xff1a;使用关键字 actor 后跟参与者的名称。用例&#xff08;Use Cases&#xff09;&#xff1a;使用关键字 usecase 后跟用例的名称和编号&#xff08;可选&#xff09;。系统边界…...

发送请求时遇到了数据库完整性约束错误 1048 Column ‘platform‘ cannot be null

可以这样解决 在 Vue 2 中封装接口请求时&#xff0c;确保每次请求都包含 platform Header 参数的最佳实践是通过创建一个全局的 Axios 实例&#xff0c;并为这个实例设置默认的 Header。这样可以确保所有通过该实例发送的请求都会自动包含 platform 参数。此外&#xff0c;你…...

三菱FX3U模拟量产品的介绍

FX3u可编程控制器模拟量产品包括&#xff1a;特殊适配器、特殊功能模块的连接 1、连接在FX3U可编程控制器的左侧。 2、连接特殊适配器时&#xff0c;需要功能扩展板。 3、最多可以连接4台模拟量特殊适配器。 4、使用高速输入输出特殊适配器时&#xff0c;请将模拟量特殊适配器连…...

pdf转图片

目录 pdf2image库 PyMuPDF库 python-office库 pdfplumber库 pdf2image库 安装&#xff1a;pip install pdf2image 使用时会报错&#xff1a;pdf2image.exceptions.PDFInfoNotInstalledError: Unable to get page count. Is poppler installed and in PATH? 需要安装 po…...

Go 协程上下文切换的代价

在 Go 语言中&#xff0c;协程&#xff08;Goroutine&#xff09;是一种非常轻量级的并发执行单元&#xff0c;设计之初就是为了简化并发编程并提高性能。协程的上下文切换被认为是非常高效的&#xff0c;但是它的真正性能优势需要我们深入了解其背后的机制。 本文将深入探讨 …...

HTTP 持久连接(长连接)

HTTP 持久连接&#xff08;长连接&#xff09; HTTP 持久连接&#xff08;HTTP Persistent Connections&#xff09;&#xff0c;也常被称作 HTTP 长连接&#xff0c;是 HTTP 协议中的一种重要特性&#xff0c;以下是关于它的详细介绍&#xff1a; 一、基本概念 在传统的 HTT…...

12月10日IO

作业&#xff1a;使用read和write实现拷贝文件&#xff0c;将1.txt内容前一半拷贝给2.txt后一半拷贝给3.txt #include <myhead.h>int main(int argc, const char *argv[]) {//打开三个文件int fd1,fd2,fd3;fd1open("1.txt",O_RDONLY);fd2open("2.txt&quo…...

Composite Pattern

Composite Pattern The intent of Composite pattern is to composite objects into tree structures to represent a “part-whole” hierarchy .The Composite Pattern allow clients to treat individual objects and composite objects uniformly. UML Used in Qt Exam…...

Springboot MVC

1. Springboot为MVC提供的自动配置 Spring Boot 为 Spring MVC 提供了自动配置&#xff0c;这在大多数应用程序中都能很好地工作。除了已经实现了 Spring MVC 的默认功能外&#xff0c;自动配置还提供了以下特性&#xff1a; 包括 ContentNegotiatingViewResolver 和 BeanNam…...

MySQL数据表记录增操作

对数据库的操作用的最最频繁的呢,总结起来就四个字:增删改查! 查是属于DQL(Data QueryLanguage &#xff0c;数据查询语言)部分,而增、改、删属于DML&#xff08;Data Manipulation Language, 数据操纵语言&#xff09; 增&#xff1a;作用是往数据库的数据表里写入记录值 语…...

maven报错“找不到符号“

问题 springboot项目 maven编译打包过程&#xff0c;报错"找不到符号" 解决 很多网上方法都试过&#xff0c;都没用 换jdk&#xff0c;把17->21...

python进阶-05-利用Selenium来实现动态爬虫

python进阶-05-利用Selenium来实现动态爬虫 一.说明 这是python进阶部分05&#xff0c;我们上一篇文章学习了Scrapy来爬取网站&#xff0c;但是很多网站需要登录才能爬取有用的信息&#xff0c;或者网站的静态部分是一个空壳&#xff0c;内容是js动态加载的,或者人机验证&…...

P1226 【模板】快速幂

题目描述 给你三个整数 &#x1d44e;,&#x1d44f;,&#x1d45d;求 &#x1d44e;&#x1d44f; mod &#x1d45d; 输入格式 输入只有一行三个整数&#xff0c;分别代表 &#x1d44e;,&#x1d44f;,&#x1d45d; 输出格式 输出一行一个字符串 a^b mod ps&#xf…...

【C++】求第二大的数详细解析

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;题目描述&#x1f4af;输入描述&#x1f4af;解题思路分析1. 题目核心要求2. 代码实现与解析3. 核心逻辑逐步解析定义并初始化变量遍历并处理输入数据更新最大值与次大值输…...

从零开始学TiDB(3)TiKV 持久化机制

如图&#xff0c;每个TiKV有两个rocksdb实例&#xff0c;rocksdbKV复制存储键值对&#xff0c;rocksdb raft负责存储复制的日志 。 每个region及其副本构成了raft group。这个OB的Zone其实有点类似&#xff0c;在OB中每个Unit及其副本构成了paxos组&#xff0c;在TiDB中叫raft…...

Elasticsearch+Kibana+IK分词器+拼音分词器安装

目录 ES报错 Kibanaik分词器拼音分词器 安装都比较简单&#xff0c;可以参考这几篇博客 ES 如何在 Linux&#xff0c;MacOS 及 Windows 上进行安装 Elasticsearch 报错 ES启动报错error downloading geoip database [GeoLite2-ASN.mmdb] Kibana KIBANA的安装教程&#xff…...

子网划分实例

看到有人问这个问题&#xff1a; 想了一下&#xff0c;这是一个子网划分的问题&#xff1a; 处理方法如图&#xff1a; 这是一个子网划分的问题 设备1用三层交换机&#xff0c;端口设置为路由模式&#xff0c;设备2和设备3为傻瓜交换机模式 设备2和设备3下挂设备都是26为掩码&…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

GraphQL 实战篇:Apollo Client 配置与缓存

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

WEB3全栈开发——面试专业技能点P4数据库

一、mysql2 原生驱动及其连接机制 概念介绍 mysql2 是 Node.js 环境中广泛使用的 MySQL 客户端库&#xff0c;基于 mysql 库改进而来&#xff0c;具有更好的性能、Promise 支持、流式查询、二进制数据处理能力等。 主要特点&#xff1a; 支持 Promise / async-await&#xf…...

归并排序:分治思想的高效排序

目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法&#xff0c;由约翰冯诺伊曼在1945年提出。其核心思想包括&#xff1a; 分割(Divide)&#xff1a;将待排序数组递归地分成两个子…...

Windows 下端口占用排查与释放全攻略

Windows 下端口占用排查与释放全攻略​ 在开发和运维过程中&#xff0c;经常会遇到端口被占用的问题&#xff08;如 8080、3306 等常用端口&#xff09;。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口&#xff0c;帮助你高效解决此类问题。​ 一、准…...