keep-alive 遇见 vue-router ·keep-alive 是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染 ·routre-view也是一个组件,如果直接被包在keep-alive里面,所以的路径匹配到的视图组件都会 被缓存 keep-alive 与 导航守卫实现嵌套路由的状态缓存: code..
先去掉home嵌套路由的重定向:
给router-view套上keep-alive
至此,一级路由的状态缓存完毕。
但是当我们访问二级路由 比如:/home/mes,然后切换出去了
再切换一级/home时,还是/home并不会访问/home/mes,我们需要在Home组件里定义相关的声明周期函数,实现嵌套路由的缓存
<script>
export default { name: 'Home', data(){ return { // 记录当组件活跃时,跳转的路由 path: '/home/news' } }, props: { }, beforeDestroy(){ console.log('home dis') }, // 活跃状态(组件被保持了状态使用了keep-alive时,切换出去切换回来调用的是 activated,deactivated,而非created,destroyed
// 如果组件没有使用keep-alive,就没有activated,deactivated生命周期函数
// 小程序默认使用的了keep-alive
activated() { console.log(this.path) this.$router.push(this.path) }, // 导航守卫(当路由离开之前 beforeRouteLeave (to, from, next) { console.log(this.$route.path) this.path = this.$route.path; next() } } </script>