样例描述：
现在有一个主页面叫home，有另一个页面叫音乐列表页面(qq-music)，剩下一个页面叫音乐详情页面(qq-music-detail)，
现在要用vuex实现从home页面到音乐列表页面时，再从音乐列表到音乐详情页面。
1.如果是从音乐详情页面返回音乐列表页面，则要把上次进入音乐列表页面的数据展示出来。
2.如果是从首页进入音乐列表页面，则重新请求，不加载缓存数据
如何用 vuex缓存数据在上一篇文章
在已实现缓存的基础上，现在要解决的就是当从home页面进入音乐列表页面时如何清空缓存数据，如何不清的话，不管从哪个页面进入，缓存数据会一直都在。
这时主要用到一个路由函数beforeRouteEnter，同时路由配置时要加上meta标签，以便区分是从前一个页面进入还是从后一个页面返回。
路由配置如下：
{
id: 1113,
meta: {
title: "0219",
isBack: false,
},
path: "/0219",
component: QqMusic,
},
beforeRouteEnter函数使用如下：
// 如果是从音乐详情页面过来的话，就把目标页面的isBack改为true
beforeRouteEnter(to, from, next) {
if (from.name === "QqMusicDetail") {
to.meta.isBack = true;
}
next();
},
created里面清空数据如下：
// 取反可以判断出页面是否需要缓存
if (!this.$route.meta.isBack) {
// 清空缓存的数据
this.updateActiveName(null);
this.updateCacheMusicList(null);
}
this.$route.meta.isBack = false; // 状态再进行重置
vuex–>music.js代码如下：主要是改变state里面缓存的数据的状态变化
state:{
cacheMusicList: {
}, // 测试缓存的musiclist
activeName: "", // 当前选中的歌手名字
},
mutations:{
// 根据条件更新缓存music，有则用，无则更新
updateCacheMusicList(state, payload) {
if (payload !== null) {
state.cacheMusicList[payload?.k] = payload?.v;
state.cacheMusicList = JSON.parse(JSON.stringify(state.cacheMusicList));
} else {
state.cacheMusicList = {
};
}
},
// 更新当前选中的name
updateActiveName(state, payload) {
state.activeName = payload;
},
}