保持活动状态不缓存组件

时间:2019-08-08 11:21:41

标签: vue.js vue-router

我对让keep-alive实际上使组件保持活动状态有疑问。

在路由器视图中呈现的组件在安装组件后进行异步获取。我的问题是,在第一次出现组件之后,当我在同一路由器中渲染其他组件,然后返回时,然后按照正常方式重新渲染第一个组件,而不是保持提取的数据不变。

我检查了钩子,除了activateddeactivated以外,还有created钩子触发,我认为在第一次渲染后应该不会出现这种情况。同样,当我切换组件destroyed时,也不会发生钩住火灾。

.container-fluid
  .row.wrapper
    aside.col-12.col-sm-2.p-0
      nav.navbar.navbar-light.navbar-expand-sm.align-items-start.flex-sm-column.flex-row.text-uppercase#navbar1
        a.navbar-toggler(href='', data-toggle='collapse', data-target='.sidebar')
          span.navbar-toggler-icon
        .collapse.navbar-collapse.sidebar
          ul.flex-column.navbar-nav.w-100.justify-content-between
            li.nav-item
              router-link.nav-link.pl-0(to='candidates' data-toggle="collapse" data-target=".navbar-collapse.show")
                font-awesome-icon.fa-fw.mr-2(:icon="iconTachometer")
                | Dashboard  

    main.col.bg-faded.py-3
      .card
        .card-body
          keep-alive
            router-view(:key="$route.fullPath")

2 个答案:

答案 0 :(得分:0)

请参见Special Attributes - key

  

它也可以用于强制更换元件/组件   而不是重复使用它。当您要执行以下操作时会很有用:

     
      
  1. 正确触发组件的生命周期挂钩;
  2.   
  3. 触发过渡。
  4.   

如果将key绑定到$route.fullPath,则每次导航事件发生时,它将始终强制替换 。因此,只需删除<router-view>

答案 1 :(得分:0)

好的,我找到了答案-道歉,因为事实证明我的问题没有得到充分的了解。

第一件事-所涉及的组件已经嵌套在另一个router-view中,所以我实际上在做的是将另一个组件嵌套。

因此,要使嵌套的子项router-view的父项router-view保持生命,还必须用keep-alive包装。

根据此处的答案:https://forum.vuejs.org/t/how-to-use-keep-alive-with-nested-router-component/46813/4