admin管理员组

文章数量:1633784

一.Vue 配置二级路由

 { 
path: '/路由地址',

component: '组件名',

children: [ { 

path: '/路由地址',

component: '组件名'

 } ]

 } 

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

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

二.组件缓存 keep-alive

<keep-alive>

  <router-view></router-view>

<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(实例被销毁后) ，因为组件没有被销毁 被缓存起来了


 

本文标签： 路由钩子嵌套缓存函数

版权声明：本文标题：Vue09Vue 配置二级路由实现路由嵌套 、组件缓存 keep-alive 和 keep-alive属性方法及两个钩子函数 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1729176005a1188726.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。