vue3 页面缓存,vue部分页面需要缓存,部分不需要缓存

　　这篇文章主要为大家详细介绍了某视频剪辑软件实现页面缓存功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件实现页面缓存功能的具体代码，供大家参考，具体内容如下

　　主要利用点火电极实现从列表页跳转到详情页，然后点击返回时，页面缓存不用重新请求资源。

　　一、在router里配置路由

　　在自指的里定义页面是否需要缓存

　　从“Vue”导入Vue

　　从" vue路由器"导入路由器；

　　//避免到当前位置的冗余导航

　　const原始推送=路由器。原型。推

　　路由器.原型.推送=功能推送（位置){

　　返回originalPush.call(this，location).接住(错误=错误)

　　}

　　Vue.use(路由器);

　　导出默认新路由器({

　　基底： ,

　　路线：[{

　　路径："/",

　　名称："索引",

　　组件：()=import(@/layout )，

　　重定向："/登录"，

　　儿童：[

　　{

　　路径：“dutySheet”，

　　名称： dutySheet ，

　　component:()=import( @/pages/Dashboard/duty sheet )

　　},

　　{

　　路径：“searchWord”，

　　姓名：搜索词，

　　组件：()=import( @/pages/daily report manage/search word/index )，

　　元：{

　　keepAlive: true //需要缓存页面

　　}

　　},

　　//匹配维护

　　{

　　路径："部队行动",

　　名称："军队行动",

　　component:()=import( @/pages/Dashboard/trooperation )，

　　元：{

　　keepAlive: false//不需要缓存

　　}

　　},

　　]

　　},

　　]

　　});

　　二、配置APP.vue

　　使用点火电极来进行缓存

　　点火电极

　　路由器视图v-if= $ route。meta。keepalive /路由器视图

　　/保持活力

　　路由器-查看v-if=！$ route。meta。keepalive /路由器视图

　　三、点击返回按钮时调用this.$router.back()方法就可以了

　　//返回

　　bacKBnt(){

　　这个. router.back()

　　},

　　四、清除缓存

　　只针对跳转到展示词或展览周刊页面才进行缓存，跳转其他页面不用缓存。

　　beforeRouteLeave(收件人、发件人、下一个){

　　如果(到。name==展字 来。name==展览周刊){//需要缓存的路由名字

　　from.meta.keepAlive=true

　　下一个()

　　}否则{

　　from.meta.keepAlive=false

　　下一个()

　　}

　　},

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。