vue动态路由缓存【前进刷新、后退缓存】，天呐

}

},

这里的isUseCache 其实就是我们用来判断是否需要使用缓存数据的字段，我们在list的路由的meta中已经默认设置为false，所以第一次进入list时是获取数据的。

当我们从详情页返回时，我们把list页面路由的isUseCache设置成true，这样我们在返回list页面时会使用缓存数据：

// 详情页面的beforeRouteLeave钩子函数

beforeRouteLeave (to, from, next) {

if (to.name == ‘List’) {

to.meta.isUseCache = true;

}

next();

},

我们这里是在即将离开detail页面前判断是否返回的列表页。如果是返回list页面，则把list页面路由的isUseCache字段设置成true。为什么这样设置呢？因为我们对list组件使用的keep-alive进行缓存组件，其默认就是使用缓存的。而我们又在list组件的actived钩子函数中进行了判断：只有在list页面的isUseCache==false时才会清空原有数据并重新获取数据。所以此处设置isUseCache为true，此时返会list页面是不会重新获取数据的，而是使用的缓存数据。

detail返回list可以缓存数据了，那么search前往list页面时怎么让list页面不使用缓存数据而是获取新数据呢？我们重新回到list的activated钩子中：

// list组价的activated钩子

activated() {

// isUseCache为false时才重新刷新获取数据

// 因为对list使用keep-alive来缓存组件，所以默认是会使用缓存数据的

if(!this.$route.meta.isUseCache){

this.list = []; // 清空原有数据

this.onLoad(); // 这是我们获取数据的函数

} else {

this.$route.meta.isUseCache = false;

}

},

我们加了一行this.$route.meta.isUseCache=false;也就是从detail返回list后，将list的isUseCache字段为false，而从detail返回list前，我们设置了list的isUseCache为true。所以，只有从detail返回list才使用缓存数据，而其他页面进入list是重新刷新数据的。

至此，一个前进刷新、后退返回的功能基本完成了。

• 在一种情况，缓存页 进入的不是de