Vue09/Vue 配置二级路由实现路由嵌套 、组件缓存 keep-alive 和 keep-alive属性方法及两个钩子函数

一.Vue 配置二级路由

 { 
path: '/路由地址',

component: '组件名',

children: [ { 

path: '/路由地址',

component: '组件名'

 } ]

 } 

介绍: 项目中如果都是一级路由，路由管理会有些乱，嵌套路由是路由内包含路由的意思，组件中可以有自己的路由导航和路由容器(router-link ,router-view ) 通过配置 children 可实现多层嵌套 ， 在vue组件中使用就可以

应用场景: 应用最多是就是选择卡,在选择卡中 顶部有多个导航栏 中间的主体显示的是内容 这个时候 整个页面是一个路由，然后点击选择卡切换不同的路由来展示不同的内容 中间的主体显示的是内容,页面路由下是子路由，就是嵌套路由

二.组件缓存 keep-alive

 

作用: 组件的缓存可以在进行动态组件切换的时候对组件内部数据进行缓存

说明: Vue中组件的切换实际是组件本身重新创建和销毁的过程，不希望组件被重新创建和重新渲染就使用组件缓存

使用场景: 多表单切换 ， 对表单内数据进行保存

介绍:

1. keep-alive是vue种的内置组件 能在组件切换过程中将状态保留在内存中，防止重复渲染DOM

2. keep-alive包裹组件时 会缓存不活动的组件实列 而不是销毁他们

   

1.keep-alive 可以设置的属性

注意: 使用时需要设置name 

include  //只缓存指定的组件

exclude //只排除指定的组件

max       // 最多可以缓存多少组件实列

2.钩子函数 activated    deactivated

当使用keep-alive时,activated    deactivated两个钩子函数就会生效

activated(激活时) 

组件被从缓存中加载出来了

第一次进入缓存路由/组件,在mounted后面，守卫传给next回调函数之前调用

deactivated(未被激活)

组件被放到缓存中去了

使用keep-alive就不会调用 beforeDestroy(实例销毁前) 和 destroyed(实例被销毁后) ，因为组件没有被销毁 被缓存起来了