实现效果：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">
? ? <!-- <router-view/> -->
? ? <!-- 可以被缓存的视图组件 -->
? ? <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
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.title = ''
? ? ? that.getData();
? ? }
? },
