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

黑马头条vue2.0项目实战(十一)——功能优化(组件缓存、响应拦截器、路由跳转与权限管理)

1. 组件缓存

1.1 介绍

先来看一个问题?

从首页切换到我的,再从我的回到首页,我们发现首页重新渲染原来的状态没有了。

首先,这是正常的状态,并非问题,路由在切换的时候会销毁切出去的页面组件,然后渲染匹配到的页面组件。

但是我想要某些页面保持状态,而不会随着路由切换导致重新渲染。

1.2 使用 keep-alive 缓存组件

官方文档:在动态组件上使用 keep-alive

<keep-alive> 主要用于保留组件状态或避免重新渲染,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

(1)组件缓存不是持久化,它只是在应用运行期间不会重新渲染,如果页面刷新还是会回到初始状态。

(2)<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。

(3)<keep-alive> 要求被切换到的组件都有自己的名字,不论是通过组件的 name 选项还是局部/全局注册。

(4)组件生命周期钩子和缓存

具体使用要根据实际情况来处理,在我们项目后续的业务功能中慢慢体会。

(5)includeexclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b"><component :is="view"></component>
</keep-alive><!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/"><component :is="view"></component>
</keep-alive><!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']"><component :is="view"></component>
</keep-alive>
  • 匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
  • 参考阅读
  • 在动态组件上使用 keep-alive
  • 内置的组件 keep-alive

1.3 项目中的缓存配置

参考链接:

  • https://juejin.cn/post/6844903887040675854vue项目实现缓存的最佳方案https://juejin.cn/post/6844903887040675854

① 在 App.vue 对根路由组件启用组件缓存

② 在 views/tabbar/index.vue 对子路由也启用组件缓存

1.4 解决缓存之后我的页面用户数据不更新问题

将原来 created 中的逻辑代码写到 activated 中:

activated () {if (this.user) {this.loadUserInfo()}
},

2. 处理 token 过期

参考链接:

  • vue中Axios的封装和API接口的管理
// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 响应成功进入这个函数return response;
}, async function (error) {// 响应失败进入这个函数,超出 2.xx 的状态码都会进入这里// console.log(error.response.status)const status = error.response.statusif (status === 400) {//  客户端请求参数异常Toast.fail('客户端请求参数异常。')} else if (status === 401) {  // token 无效,过期// 如果没有 user或者 user.token,直接去登录const user = store.state.userif (!user || !user.token) {// replace 方法不会形成历史记录,push 会形成历史记录redirectLogin()return }// 使用 refresh_token,则请求获取新的 tokentry {const res = await refreshTokenRequest(user.refresh_token)// 拿到新的 token 之后把它更新到容器之中user.token = res.data.data.tokenstore.commit('setUser', user)// 把失败的请求重新发出去 error 是本次请求的相关配置对象return axios(error.config)} catch (err) {// token 刷新失败,直接跳转登录页面redirectLogin()}} else if (status === 403) {Toast.fail('没有权限操作。')} else if (status >= 500) {// 服务端异常Toast.fail('服务端异常。')}return Promise.reject(error);
});const refreshTokenRequest = (refresh_token) => {return axios({url: 'https://toutiao.itheima.net/v1_0/authorizations',method: 'PUT',headers: {'Content-Type': 'application/x-www-form-urlencoded',Authorization: 'Bearer' + ' ' + refresh_token}})
}
const redirectLogin = () => {// router.currentRoute 当前路由对象,和你在组件中访问的 this.$route 是同一个东西// query 参数的数据格式就是:?key=value&key=valuerouter.replace({name: 'login',query: {redirect: router.currentRoute.fullPath}})
}

3. 登录成功跳转回原来页面

4. 处理页面的访问权限

① 给需要登录状态才能访问的页面路由对象的 meta 中添加配置属性

② 通过路由拦截器统一校验

  • 路由拦截器

相关文章:

黑马头条vue2.0项目实战(十一)——功能优化(组件缓存、响应拦截器、路由跳转与权限管理)

1. 组件缓存 1.1 介绍 先来看一个问题&#xff1f; 从首页切换到我的&#xff0c;再从我的回到首页&#xff0c;我们发现首页重新渲染原来的状态没有了。 首先&#xff0c;这是正常的状态&#xff0c;并非问题&#xff0c;路由在切换的时候会销毁切出去的页面组件&#xff…...

《AI视频类工具之一——​ 即创》

一.简介 官网:即创 - 一站式智能创意生产与管理平台 即创是字节跳动(现更名为抖音集团)旗下的一款一站式智能创意生产与管理平台,旨在帮助用户高效地进行创意内容的生成、管理和分析。 二.功能介绍 视频创作: 智能成片:利用AI技术自动编辑视频片段,快速生成完整的视频…...

CSS的:host伪类:精确定位于Web组件的指南

随着Web组件技术的发展&#xff0c;自定义元素&#xff08;Custom Elements&#xff09;已经成为现代Web开发中不可或缺的一部分。CSS的:host伪类为Web组件的样式封装提供了一种强大的工具&#xff0c;它允许开发者为自定义Web组件的宿主元素定义样式。本文将详细介绍:host伪类…...

安卓sdk manager下载安装

安卓sdk下载安装 android SDK manager下载 环境变量配置 ANDROID_HOME&#xff1a;D:\Android %ANDROID_HOME%\tools %ANDROID_HOME%\platform-tools %ANDROID_HOME%\build-tools\29.0.3Android SDK Platform-tools公用开发工具包&#xff0c;需要下载 Android SDK Tools基础…...

CV学习笔记3-图像特征提取

图像特征提取是计算机视觉中的一个关键步骤&#xff0c;其目标是从图像中提取有意义的特征&#xff0c;以便进行进一步的分析或任务&#xff0c;如分类、检测、分割等。特征提取可以帮助减少数据的维度&#xff0c;同时保留重要的信息。以下是常见的图像特征提取方法和技术&…...

Git使用方法(三)---简洁版上传git代码

1 默认已经装了sshWindows下安装SSH详细介绍-CSDN博客 2 配置链接github的SSH秘钥 1 我的.ssh路径 2 进入路径cd .ssh 文件 3 生成密钥对 ssh-keygen -t rsa -b 4096 (-t 秘钥类型 -b 生成大小) 输入完会出现 Enter file in which to save the key (/c/Users/Administrator/…...

8.21-部署eleme项目

1.设置主从从mysql57服务器 &#xff08;1&#xff09;配置主数据库 [rootmsater_5 ~]# systemctl stop firewalld[rootmsater_5 ~]# setenforce 0[rootmsater_5 ~]# systemctl disable firewalldRemoved symlink /etc/systemd/system/multi-user.target.wants/firewalld.serv…...

多目标跟踪之ByteTrack论文(翻译+精读)

ByteTrack&#xff1a;通过关联每个检测框进行多对象跟踪 摘要 翻译 多对象跟踪&#xff08;MOT&#xff09;旨在估计视频中对象的边界框和身份。大多数方法通过关联分数高于阈值的检测框来获取身份。检测分数低的物体&#xff0c;例如被遮挡的物体被简单地丢弃&#xff0c;…...

【实践】Java开发常用工具类或中间件

在Java开发中&#xff0c;有许多常用的工具类和中间件&#xff0c;它们可以显著提高开发效率&#xff0c;简化代码&#xff0c;并提供强大的功能。这些工具类和中间件广泛应用于各种类型的Java应用程序中&#xff0c;包括Web应用、企业级应用、微服务等。以下是一些在Java开发中…...

Vue2移动端(H5项目)项目封装车牌选择组件

一、最终效果 二、参数配置 1、代码示例&#xff1a; <t-keyword:isShow"isShow"ok"isShowfalse"cancel"isShowfalse"inputchange"inputchange":finalValue"trailerNo"/>2、配置参数&#xff08;TKeyword Attribute…...

四川财谷通信息技术有限公司抖音小店的优势

在数字化浪潮的推动下&#xff0c;电商行业迎来了前所未有的发展机遇&#xff0c;而抖音小店作为新兴的电商平台&#xff0c;凭借其独特的社交属性和便捷的购物体验&#xff0c;迅速赢得了广大消费者的青睐。在众多抖音小店中&#xff0c;四川财谷通信息技术有限公司旗下的抖音…...

2025届八股文:计算机网络高频重点面试题

鉴于排版复杂且篇幅过长&#xff0c;本文仅列举出问题&#xff0c;而未给出答案&#xff0c;有需要答案的同学可后台私信。整理总结不易&#xff0c;请尊重劳动成果&#xff0c;转载请注明出处。 目录 网络基础 HTTP TCP UDP IP PING WebSocket DNS 网络安全 网络基础…...

嵌入式和单片机有什么区别?

目录 &#xff08;1&#xff09;什么是嵌入式&#xff1f; &#xff08;2&#xff09;什么是单片机&#xff1f; &#xff08;3&#xff09;嵌入式和单片机的共同点 &#xff08;4&#xff09;嵌入式和单片机的区别 &#xff08;1&#xff09;什么是嵌入式&#xff1f; 关…...

JSON.stringify 和 JSON.parse

JSON.stringify 是一个将 JavaScript 对象转换为 JSON 字符串的方法&#xff0c;它有三个参数&#xff1a; JSON.stringify(value, replacer, space) 参数详解 value &#xff08;必需&#xff09;: 这是你想要转换为 JSON 字符串的 JavaScript 对象或数组。例如&#xff1a;…...

APP架构设计_2.用MVVM架构实现一个具体业务

2.MVVM架构图 3.MVVM 实现一个具体业务 3.1 界面层的实现 界面层实现时&#xff0c;需要遵循以下几点。 1&#xff09;选择实现界面的元素 界面元素可以用 view 或 compose 来实现&#xff0c;这里用 view 实现。 2&#xff09;提供一个状态容器 这里使用 ViewModel 作为状态容…...

安恒信息总裁宋端智,辞职了!活捉一枚新鲜出炉的餐饮人!

吉祥知识星球http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247485367&idx1&sn837891059c360ad60db7e9ac980a3321&chksmc0e47eebf793f7fdb8fcd7eed8ce29160cf79ba303b59858ba3a6660c6dac536774afb2a6330#rd 《网安面试指南》http://mp.weixin.qq.com/s?…...

《javaEE篇》--定时器

定时器概念 当我们不需要某个线程立刻执行&#xff0c;而是在指定时间点或指定时间段之后执行&#xff0c;假如我们要定期清理数据库里的一些信息时&#xff0c;如果每次都手动清理的话就太麻烦&#xff0c;所以就可以使用定时器。定时器就可以比作一个闹钟&#xff0c;可以让…...

OpenLayers3, 缩放、平移、复位操作

文章目录 一、前言二、代码示例 一、前言 本文基于OpenLayers3实现地图缩放、平移和复位操作 二、代码示例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htm…...

进程与线程(7)

IPC通信方式&#xff1a; 一、共享内存 system v &#xff1a; 共享内存 是一块&#xff0c;内核预留的空间 最高效的通信方式 (避免了用户空间 到 内核空间的数据拷贝) 二、IPC对象操作通用框架&#xff1a; key值 > 申请 》读写 》关闭 》卸载 1.ftok函数&#xff1a;…...

传知代码-自动化细胞核分割与特征分析(论文复现)

代码以及视频讲解 本文所涉及所有资源均在传知代码平台可获取 引言 细胞核分割和分类在医学研究和临床诊断中具有重要意义。精准的细胞核分割能够帮助医生更好地识别和分析细胞核的形态学特征&#xff0c;从而辅助疾病诊断、癌症检测以及药物研发。HoverNet是一种基于深度学…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...