当前位置: 首页 > 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为掩码&…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...