vue进入页面每次执行_Vue学习笔记之路由的keep-alive应用及技巧

2023-11-08

keep-alive的应用:

作用:keep-alive是Vue内置的一个组件,可以使比包含的组件保留状态,或避免重新渲染,而router-view也是一个组件,如果直接被包在keep-alive里面,所有的路径匹配到的视图组件都会被缓存。

生命周期:

· 初次进入时:created > mounted > activated;退出后触发 deactivated

· 再次进入:会触发 activated;事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中

PS:复习一下Vue的生命周期,其中destroyed在vue3里面改为unmounted

实现方法:

PS:Vue3的格式如下

在about里面做这样的修改:在进入页面活跃状态时,给他赋值一个path值,当离开这个页面时,通过组件内导航守卫 beforeRouteLeave 记录上一次离开时的状态:

所以我在about页面上切换"新闻"、"消息"的时候,就能记住最后一次离开页面的地址:

所以当页面离开about页面跳转到其他页面后,再回到about页面时,下面显示的还是"新闻"这个界面的内容。

PS:activated和deactivated两个函数,只有该组件被保持了状态使用了时,才是有效的。

keep-alive的属性:

· include:字符串或正则表达式,只有匹配的组件会被缓存

· exclude:字符串或正则表达式,任何匹配的组件都不会被缓存

这样About跟User两个组件就不会被缓存了。

PS:正则表达式或组件名字之前不要加空格!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue进入页面每次执行_Vue学习笔记之路由的keep-alive应用及技巧 的相关文章

  • python爬虫七:图新验证码的识别

    1 Tesseract安装与简介 阻碍我们爬虫的 有时候正是在登录或者请求一些数据时候的图形验证码 因此这里我们讲解一种能将图片翻译成文字的技术 将图片翻译成文字一般被称为光学文字识别 Optical Character Recogniti
  • 使用Python,Tesseract更正文本方向

    这篇博客将介绍如何使用 Tesseract 的方向和脚本检测 OSD 模式执行自动文本方向检测和更正 orientation and script detection OSD 方向和脚本检测 text orientation 文本定向 OS
  • axios详解以及完整封装方法

    一 axios是什么 Axios 是一个基于 promise 网络请求库 作用于node js 和浏览器中 它是 isomorphic 的 即同一套代码可以运行在浏览器和node js中 在服务端它使用原生 node js http 模块
  • 地形纹理Splatting技术(翻译)

    地形纹理Splatting技术 翻译 文章来源 http www gamedev net reference articles article2238 asp Texture Splatting in Direct3D Introducti
  • 怎么重新编译CE5.6?

    按以下步骤 可以重先编译CE5 6 一 准备工作 1 CE5 6源码 http http www cheatengine org downloads php2 微软的WDK http www microsoft com downloads
  • AD20/Altium designer——如何生成Gerber打板文件

    Gerber文件是线路板行业软件描述线路板 线路层 阻焊层 字符层等 图像及钻 铣数据的文档格式集合 是线路板行业图像转换的标准格式 通常我们打板时厂家会要求发送Gerber文件 本文介绍如何在AD20到处Gerber文件 1 文件 制造输
  • AI与伦理道德

    我们无法知道我们将无限地得到人工智能的帮助 还是被藐视并被边缘化 或者很可能被它毁灭 的确 我们担心聪明的机器将能够代替人类正在从事的工作 并迅速地消灭数以百万计的工作岗位 人工智能的研究与开发正在迅速推进 也许我们所有人都应该暂停片刻 把
  • 三十六计之混战计

    三十六计的第四篇 共六计 釜底抽薪 混水摸鱼 金蝉脱壳 关门捉贼 远交近攻和假途伐虢 此篇计谋适合于敌友不分 军阀混战时使用 第十九计 釜底抽薪 不敌其力 而消其势 兑下乾上之象 不敌其力 敌 动词 攻打 力 最坚强的部位 而消其势 势 气
  • python接口自动化之DDT数据驱动测试

    一 简单介绍 DDT Date Driver Test 所谓数据驱动测试 简单来说就是由数据的改变从而驱动自动化测试的执行 最终引起测试结果的改变 通过使用数据驱动测试的方法 可以在需要验证多组数据测试场景中 使用外部数据源实现对输入输出与
  • 04 openEuler UKUI 桌面环境的安装和使用

    04 openEuler UKUI 桌面环境的安装和使用 文章目录 04 openEuler UKUI 桌面环境的安装和使用 4 1 UKUI简介 4 2 UKUI安装方法 4 2 1 更新软件源 4 2 2 安装UKUI 4 2 3 设置
  • CMT2380F32模块开发15-SPI例程

    这篇文章基本就是水一篇 因为例程需要操作铁电存储器FM25640 我的开发板上没有这个 我也没有买这个芯片 这个芯片也不便宜 10元左右 所以这篇就讲讲原理 简单讲讲函数吧 SPI 接口是工作于全双工模式下的同步串行数据通信接口 使用4个引
  • matlab中用于小数取整的函数的用法

    matlab中小数取整的函数大约有四个 floor ceil round fix 若 A 2 0 1 9 1 55 1 45 1 1 1 0 1 1 1 45 1 55 1 9 2 0 floor 朝负无穷方向靠近最近的整数 floor A
  • html页面通过id在页面内跳转,HTML跳转到页面指定位置的几种方法

    前言 有时候 我们想阅读页面中某段精彩的内容 但由于页面太长 用户需要自己滚动页面 查找起来非常麻烦 很容易让人失去继续往下阅读的兴趣 这样体验非常不好 所以我们可以想办法 实现点击某段文字或者图片跳转到页面指定位置 方便用户的阅读 一 纯
  • Python打开读文件:UnicodeDecodeError: ‘utf-8‘ codec can‘t decode byte 0xed in position 7014: invalid conti

    1 问题 Python用open 打开文件 读取其中内容时 报错说编码错误 utf 8 编码不能给字节0xed编码 feed LM input feed file data raw 21000101 204243 txt Traceback
  • Electron 开发环境注意项、踩坑补坑记录

    Electron Bug 解决 1 package json里的lib参数删除 2 项目目录不允许有中文 否则不能下载打包依赖 导致无法打包 3 每次打包软件前都可能缺失依赖包 需要手动在package json文件里的dependenci
  • ubuntu或者linux下卸载和安装多个jdk版本,1.6,1.7和1.8版本

    今天我教大家在ubuntu下安装多个jdk 我的系统是ubuntu 14 04 64位的 所以我下的的都是适合我的系统的 大家可以根据自己的系统从下面的页面中选择下载适合自己系统的jdk版本 jdk1 6 http www oracle c
  • 鉴源论坛 · 观模丨基于应用程序编程接口(API)的自动化测试(上)

    作者 黄杉 华东师范大学软件工程学院博士 苏亭 华东师范大学软件工程学院教授 版块 鉴源论坛 观模 社群 添加微信号 TICPShanghai 加入 上海控安51fusa安全社区 01 应用程序编程接口 API 应用程序编程接口 英文全称为
  • React Native_React Native组件(ListView&FlatList&SectionList)

    ListView 不分组Demo heros json image 1 jpg title 有关斯维因的最早记载出现在诺克萨斯养老院一名医生的笔记上 据载 斯维因一瘸一拐地走进病房 没有叫喊也没有抱怨 他的右腿被折成两段 骨头破皮而出 他的
  • Android开源框架之Glide

    这个图片加载框架功能比较强大 相比起其他框架大多数开发者使用该框架加载图片 简介 1 使用简单 2 可配置度高 自适应程度高 3 支持常见图片格式 Jpg png gif webp 4 支持多种数据源 网络 本地 资源 Assets 等 5

随机推荐

  • 自定义键盘KeyboardView如何添加点击音效

    前段时间通过继承KeyboardView做了个自定义键盘 后来测试发现在打开触摸按键音时没有按键音效果 经过多番尝试最后终于解决了问题 关于View的点击音是如何实现的请参考 点击打开链接 KeyboardView 的文档说明请参考 点击打
  • java学习----数据解析

    目录 1 何为数据解析 2 xml解析 3 Excel解析 4 json解析 一 何为数据解析 举个栗子 如果不同的程序之间需要通信 假如说A程序需要B程序做一件事 B程序说 我可以做这件事 但是需要给我必须的数据 我才能做这件事 我们可以
  • 火狐浏览器没有java的插件_win7操作系统,已安装jdk8,火狐浏览器显示没有安装java插件,为什么?...

    安装jdk需要做的重要步骤是设置环境变量 右击我的电脑 属性 高级系统设置 环境变量 进去之后需要设置两个 变量名 java home 变量值 E Program Files Java jdk1 6 0 07 变量名 classpath 变
  • git新建仓库提交项目代码+常用命令

    一 新建仓库 输入一下仓库名称 归属和路径都是生成的不需要自己去编辑 点击创建就创建了一个新的仓库 下面就是仓库刚创建好的样子 二 向仓库里提交项目代码 首先打开你要提交的项目文件看一下文件里有没有 git文件夹 方法一 已经有仓库了 前面
  • jQuery&animation实现漂流瓶扔和写动画效果

    捞一个 和 扔出去 漂流瓶纯动画 jQuery animation实现 移动端大小 单位rem
  • OK1043-openwrt系统移植

    openwrt系统移植 在GitHub中找到最新的openwrt源码 GitHub网站 GitHub openwrt openwrt at v22 03 5 下载openwrt 22 03 5稳定发行版源码 git clone https
  • 3Dmax和C4d有什么区别?

    作为市面上常见的两款三维制作软件 3Dmax和C4d在当下社会中的应用范围不可谓不广泛 而出于职业发展前景的考虑 不少同学都希望通过在真正步入社会前掌握一定的技术专长 三维制作技术正是其中之一 所以这类似于3Dmax和C4d究竟有什么区别
  • #include 主要用法

    c stl栈stack的头文件为 include
  • 用SQL语句查询以后,返回不存在的值,用0代替

    最近在弄一个统计图 碰到几个问题 数据库 MS SQL Server 2005 1 用SQL语句查询以后 返回不存在的值 用0代替 基本业务是这样的 我需要统计历年和今年的数据 这个项目是从今年开始的 不可能存在历年的数据 但是这一列必须显
  • 小程序canvasToTempFilePath获取的图片地址在真机不显示???

    小程序canvasToTempFilePath获取的图片地址在真机不显示 wx canvasToTempFilePath把当前画布指定区域的内容导出生成指定大小的图片 但是直接在真机使用生成的图片地址时发现图片无法显示 这是为啥子呢 请看下
  • 在墨卡托投影世界地图中根据经纬度转换平面坐标

    墨卡托投影 度数转换为弧度 fun degreesToRadians degrees Float Double return degrees Math PI 180 x R longitude1 180 y R log tan PI 4 l
  • 最大数据段长度

    最大数据段长度 UDP数据包允许的最大数据长度是多少 互联网编程博客本资讯是关于UDP数据包允许的最大数据长度是多少 UDP最大数据段长度是多少 MSS的最大报文段长度选项 TCP UDP包的最大长度是多少相关的内容 由互联网编程博客为您收
  • nginx worker_processes、worker_connections设置多少合适?

    一 worker processes worker connections设置多少合适 worker processes与worker connections 设置好合适大小可以提高nginx处理性能 所以非常重要 原作者的话 As a g
  • JDBC与MySQL编程中URL是什么_什么是JDBC URL以及JDBC URL的语法格式

    JDBC URL概念 在使用DriverManager getConnection方法连接数据库的时候 必须提供一个参数URL Uniform Resource Locator URL向驱动程序提供个一个识别数据源的方法 根据URL先前载入
  • 企业级 Go 项目实战,记住这 5 大核心要点

    不知不觉 Go 已经走过了 14 个年头 根据 JetBrains Blog 前段时间针对 Go 语言开发者的做了一项调查报告 全世界有 110 万专业开发者选择 Go 作为其主要开发语言 毫无疑问 中国占比最高 过去 5 年中 在全球的
  • .tab如何转.shp?

    MapInfo下的 tab文件格式转成 shape 用MapInfo tools gt Universal Translator即可 要注意的是 必须是英文路径 如果不是 则转换不会成功
  • 1. mysql常用语句之简单检索(SELECT和SHOW)

    文章目录 1 简单检索和显示 1 0 连接mysql服务器 1 1 创建数据库 1 2 选择名为database name的数据库 1 3 返回可用数据库的一个列表名信息 1 4 返回当前选择的数据库内可用表的列表 1 5 返回名为tabl
  • 中国剩余定理

    例子1 例子2 通用公式 证明解存在 参考链接 最美数学系列 什么是中国剩余定理 哔哩哔哩 bilibili
  • MarkDown支持Emoji表情

    MarkDown支持Emoji表情 文章目录 MarkDown支持Emoji表情 MarkDown简介 插入Emoji表情 方法一 键盘输入 方法二 快捷键选择插入 方法三 打开表情与符号 此方法仅限MacOS系统 方法四 输入表情代码插入
  • vue进入页面每次执行_Vue学习笔记之路由的keep-alive应用及技巧

    keep alive的应用 作用 keep alive是Vue内置的一个组件 可以使比包含的组件保留状态 或避免重新渲染 而router view也是一个组件 如果直接被包在keep alive里面 所有的路径匹配到的视图组件都会被缓存 生