keep-alive不缓存组件

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

好吧，我找到了答案--我很抱歉，因为事实证明我的问题并没有完全被告知。

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

因此，为了保持该嵌套/子router-view父router-view的活性，还必须用keep-alive包装它。

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

Answer 2

请参阅Special Attributes - key

它还可以用于强制替换元素/组件，而不是重用它。当您需要执行以下操作时，这会非常有用：

正确触发component;

• Trigger转换的生命周期挂钩的

1. 。

如果您将key绑定到$route.fullPath，那么每次发生导航事件时，它都会强制<router-view>元素/组件的替换。所以只要删除:key就行了。