缓存路由组件

正常情况下，切换路由组件时，不展示的路由组件会被销毁。为了让不展示的路由组件保持挂载，不被销毁，就用到了缓存路由组件。

想要某个组件在切换后不展示时不被销毁，将其的<router-view></router-view>写在<keep-alive></keep-alive>标签里面。这样切换路由时，前一个路由就不会被销毁。

      <keep-alive><router-view></router-view></keep-alive>

<keep-alive>默认是所有写在 <keep-alive>所包裹里面的组件切换后都不会销毁。 属性 include = 'News' 表示组件名为News且是keep-alive所包裹，切换后不会被销毁。

问题：如果多个路由要在 <router-view></router-view> 中所展示，但是缓存的话，只想缓存其中的某几个路由，不想缓存所有的路由，写法：

      <keep-alive :include= '["News","Message"]'> <router-view></router-view></keep-alive>

分析:写成一个数组的形式，把所有需要缓存的路由名，写到数组里面。

注意点：这样缓存路由的话，会阻止该路由的销毁函数执行（beforeDestroy和destroyed），也就不能销毁。

路由组件独有的生命周期钩子 activated 和 deactivated

在写缓存路由时，用到 activated 和 deactivated，既能保证路由会被缓存，也能保证该路由会被激活和失活。

activated 在路由被激活时执行，deactivated在路由失活的时候执行。

eg：

缓存路由组件+路由组件的2个生命周期钩子 activated 和 deactivated相关推荐

vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录组件结构组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...
Vue3基础——条件渲染、列表渲染、事件事件修饰符、父子组件间的数据传递、生命周期钩子
文章目录 p12 条件渲染v-if与v-show p13 列表渲染v-for p14 事件与参数和事件修饰符 p15 表单的数据双向绑定 p16 组件与父组件传递数据给子组件 -- 方式props ...
Vue缓存路由（keep-alive）以及新的生命周期
一.概念也就是说,kee-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染 .也就是所谓的组件缓存 keep-alive 是 Vue 的内置组件,当它包裹动态组 ...
Spring框架学习day_02:组件扫描 / 注解内部读解 / 组件扫描中配置作用域和生命周期 / 解耦 / 自动装配(两种方式) / 读取文件
1. 组件扫描首先,必须让Spring扫描组件所在的包,并且,组件类的声明之前必须添加@Component注解! 其实,除了@Component注解以外,还可以使用以下注解实现同样的效果: @Con ...
reactjs组件生命周期：componentWillReceiveProps及新旧版本生命周期钩子函数对比
reactjs组件生命周期:componentWillReceiveProps及新旧版本生命周期钩子函数对比
深入了解React组件重新渲染的条件和生命周期
React组件rerender的真正条件当前组件的State中的属性改变时且当前组件的shouldcomponentupdate返回true,那么当前组件会rerender 组件的props中的任一 ...
【Angular 4】组件生命周期钩子
组件生命周期钩子? 指令和组件的实例有一个生命周期:新建.更新和销毁. 每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 ng 前缀构成的.比如:OnInit接口的钩子方法叫做ngOnInit ...
Vue多组件切换，并相互传值（在created和mounted生命周期钩子函数中渲染数据的区别）
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
vue 组件，props 属性，Vue 生命周期
本文涉及3个内容: 1.vue 组件: 目录结构: 源码分析如下: <div id="container"><h3>爱吃什么水果? app 实例</ ...
Vue 封装的组件生命周期钩子
export default {// ...// 在组件初始化时调用,可以简单理解为页面加载时created () {// 存在 localStorage 的缓存内容 if (localStorage ...

缓存路由组件+路由组件的2个生命周期钩子 activated 和 deactivated

缓存路由组件

路由组件独有的生命周期钩子 activated 和 deactivated

缓存路由组件+路由组件的2个生命周期钩子 activated 和 deactivated相关推荐

最新文章

热门文章