keep-alive实现不同页面跳转列表页的缓存状态

erduoduo520

已于 2022-05-11 14:12:57 修改

阅读量560

点赞数 1

文章标签： vue.js 前端

于 2022-04-27 16:32:59 首次发布

本文链接：https://blog.csdn.net/erduoduo1989/article/details/124454124

版权

本文介绍了一个Vue项目中如何实现首页不缓存，列表页缓存，从详情页返回列表页保留缓存的配置。通过设置`router-index.js`中各路由的`meta`属性，结合`app.vue`中的`<keep-alive>`标签动态控制组件缓存，以及在`list.vue`中使用`beforeRouteEnter`和`activated`钩子进行数据刷新。

摘要由CSDN通过智能技术生成

实现效果：home首页跳转list页面不缓存，detail页面返回list页面保留缓存。

路由页面定义keep-alive和isback router - index.js

{
path: '/home',
name: 'home',
component: () =>
import ('../views/home.vue'),
},
{
path: '/list',
name: 'list',
component: () =>
import ('../views/list.vue'),
meta: {
keepAlive: true,
isBack: false
},
},
{
path: '/detail',
name: 'detail',
component: () =>
import ('../views/detail.vue'),
},

app.vue页面

<template>

<div id="app">





<keep-alive>

<router-view v-if="$route.meta.keepAlive"></router-view>

</keep-alive>



<router-view v-if="!$route.meta.keepAlive"></router-view>

</div>

</template>

list.vue页面

主要用到 beforeRouteEnter 和 activated

created() {

        this.isFirst = true

        this.getData();

}

beforeRouteEnter(to, from, next) {

        if (from.name == "detail") {

                to.meta.isBack = true;

        } else {

                to.meta.isBack = false;

        }

        next();

},

activated(){

        let that = this;

        if (!this.$route.meta.isBack && that.isFirst==false) {

                //参数清空重新请求数据

                that.title = ""

                that.page = 1

                that.getData();

        }

},

deactivated(){

        this.isFirst = false

},