Question

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

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

我检查了钩子，除了activated和deactivated以外，还有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")

Answer 1

请参见Special Attributes - key：

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


正确触发组件的生命周期挂钩；

触发过渡。

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

Answer 2

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

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

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

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

保持活动状态不缓存组件

2 个答案: