做商城类网站备案时需提供什么证件/推广的十种方式

开发需求

1. 动态展示系统首页所有的结构
2. 点击日期查询对应的数据 点击数据跳转对应的页面 然后 返回上一页时 “要求保留跳转之前的日期数据状态”
3. 只针对系统首页进行数据缓存

使用 vue内置组件 keep-alive 进行缓存 从而实现想要的功能

出现的问题

1. 使用keep-alive 包裹的路由 会对所有的页面进行缓存 任然保留上一次的数据 与开发需求不符
2. 因为缓存的原因 没有走到 页面销毁的钩子函数 ‘deactivated’

官网给出的解析

“ keep-alive” 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
keep-alive是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。 当组件在keep-alive 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行

通过include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

include - 字符串或正则表达式。只有匹配的组件会被缓存。

exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。

实际开发解决方案

第一种

可以在不想进行缓存的组件中，可以添加该方法来设置组件不被keep-alive进行缓存:
原理是 在路由跳转之前 对页面进行销毁 清除缓存 实现下次进来时页面数据从新加载

<template><div>不需要进行缓存的页面</div>
</template>
<script>
export default {data() {return {}},methods:{},// 添加这一行 可以保证组件不被keep-alive进行缓存deactivated() {this.$destroy();}
}
</script>
<style  scoped></style>

第二种

使用官网给出的方法 通过 include 设定组件有条件地缓存（可以选择性的缓存）

<keep-alive :include="routerName"><router-view />
</keep-alive>data(){return {//设置需要缓存组件名字routerName: {'homePage' // 组件名称}}
}

在想要缓存的组件中 定义该名字 （一定要写）

<template><div>需要进行缓存的页面</div>
</template>
<script>
export default {// name的名称要和 include 字符要一直 才能达到缓存的效果name:'homePage',data() {return {};},methods:{}
}
</script>
<style  scoped></style>