如何实现Vue中创建实用的标签缓存导航功能？

本文共计2861个文字，预计阅读时间需要12分钟。

需求+需要做一件tag，当切换页面的时候保留状态。效果图+思路+既然涉及了router跳转，我们就去查api，发现了keep-alive，巧了就用它吧。这里我们用到了include属性，该属性接受一个数组。

需求

是要做一个tag，当切换页面的时候保留状态。

效果图：

思路

既然涉及了router跳转，那我们就去查api 发现keep-alive，巧了就用它吧。这里我们用到了include属性，该属性接受一个数组，当组件的name名称包含在inclue里的时候就会触发keep-alive。

import { Vue, Component, Watch, Mixins } from 'vue-property-decorator'; // 此处省略n行代码 // 这是个计算属性。（至于为什么这么写 这里就不介绍了。） get cachedViews():string[] { return this.$store.state.tagsView.cachedViews; } // 此处省略n行代码 <keep-alive :include="cachedViews"> <router-view :key="key"></router-view> </keep-alive>

那我们接下来就处理cachedViews变量就好了。