30.vue keep-alive,transition,路由的整体应用

在使用history.back(),这种返回的界面,再次进入的时候声明周期函数都会重新调用

history.go(),
history.back(),//后退一页
history.forward()//前进一页
window.history.go(-1);//后退一页
window.history.go(-n);//后退n页
window.history.go(1);//前进一页
window.history.go(n);//前进n页
window.history.go(0);//刷新页面

但是通过this.$router.push 的方式再次进入的界面如果界面内容没有任何改变的话,不会再次调用下面的生命周期函数

beforeCreate(创建前)
created(创建后)
beforeMount(载入前)
mounted(载入后)
beforeUpdate(更新前)
updated(更新后)
beforeDestroy(销毁前)
destroyed(销毁后)

1.当项目中使用了keep-alive之后,mounted,destroyed函数将不会被调用,反之会调用activated和deactivated函数。
2.keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
3.在没有使用keep-alive的项目中,通过history.back()这种方式返回的界面重新进入时相当于是一个全新的界面进入。
4.router-view代表的内容是router设置的路径下对应的界面。
5.当使用嵌套路由的时候,keep-alive函数只对最外层的路由函数起作用,而对于内部的子路由无法实现页面的缓存,这时可以通过2层keep-alive实现子路由的缓存。

就是在子路由的入口那里在添加一层keep-alive

  1. 不要使用两个transition包裹,会导致缓存界面到非缓存界面,动画出错
  2. 不要使用route.meta.keepAlive的方式会导致当页面缓存为true到false的界面,会自动调用true界面的destory,然后当false界面回到true界面的时候,按照全新的界面即调用mounted又调用activated,导致出错
  3. 正常的情况应该是无论怎样跳转,除了第一次,不会在调用mounted,而是调用activated
  4. add, delete, release代表路由中name对应的名字
    
      
        
      
       
    

你可能感兴趣的:(30.vue keep-alive,transition,路由的整体应用)