keep-alive 遇见vue-router

131 阅读1分钟

背景

解决首页里有多路由的情况下,如何保持切换到首页,子路由还在上个位置固定?

keep-alive

保持组件切换的时候不被重复的卸载和创建,被该标签包裹的组件,有active和deacive生命周期

image.png

image.png

image.png

按上述demo,我们查看下生命周期的调用。

  1. 一进页面,默认进home

image.png

  1. 点击“关于”切换到about

image.png

created先调用,然后是activated,但是活跃的只能是一个,所以先让上一个活跃的不活跃,在让当前的活跃。所以加载about 的生命周期是这样的

keep-alive属性

上个例子我们把整个router-view都放在了keep-alive里边,导致里边渲染的每个组件都是走缓存,不重复创建的,那么如果router-view中的某一个path我们不想让缓存,怎么做呢?

使用keep-alive的exclude属性,值为component的name

image.png

image.png

image.png