vue开始工作,后台项目

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 它是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

　　

tabs:

在做tab切换的时候,我没一个tab项都是一个组件,刚加载第一个tab项的时候就把其他tab项的mounted内容加载出来了,所以用到懒加载,看文档没有相关的懒加载,后来用的是路由懒加载不可以,然后想的是监听tab切换的事件,切换到哪哪里显示,显然更不可以,因为首次切换可以显示,但是你如果下次再切换会一直请求,后来尝试在tab标签里面写lazy就解决了这个问题.代码如下

<el-tabs v-model="activeName" type="card">
      <el-tab-pane label="日报" name="first" lazy>
        <day-report/>
      </el-tab-pane>
      <el-tab-pane label="月报" name="second" lazy>
        <month-report/>
      </el-tab-pane>
      <el-tab-pane label="专题报告" name="third" lazy>
        <project-report/>
      </el-tab-pane>
   </el-tabs>

我查看其他的也有相关方法,没有试验,先记录一下

tab在后台项目中也比较常用的。假设我们有四个tab选项，每个tab都会向后端请求数据，但我们希望一开始只会请求当前的tab数据，而且tab来回切换的时候不会重复请求，只会实例化一次。首先我们想到的就是用 v-if 这样的确能做到一开始不会挂载后面的tab，但有一个问题，每次点击这个tab组件都会重新挂载一次，这是我们不想看到的，这时候我们就可以用到 <keep-alive>了

 

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 它是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

<el-tabs v-model="activeTab">
  <el-tab-pane label="简介及公告" name="announcement">
    <announcement />
  </el-tab-pane>
  <el-tab-pane label="资讯" name="information">
    <keep-alive>
      <information v-if="activeTab=='information'" />
    </keep-alive>
  </el-tab-pane>
  <el-tab-pane label="直播流配置" name="stream">
    <keep-alive>
      <stream v-if="activeTab=='stream'" />
    </keep-alive>
  </el-tab-pane>
</el-tabs>