zoukankan      html  css  js  c++  java
  • vue keep-alive 遇见 vue-router

    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>
  • 相关阅读:
    UML基本关系
    C++关键字简述
    Install opencv on Centos
    C++编程规范
    YCbCr to RGB and RGB toYCbCr
    Linux目录结构(二)
    Dubbo工作流程
    spring bean的作用域和生命周期
    spring aop原理和实现
    静态代理、jdk动态代理、cglib动态代理
  • 原文地址:https://www.cnblogs.com/cl94/p/12365520.html
Copyright © 2011-2022 走看看