利用sessionStrong浏览器缓存，实现详情页面返回列表页，列表页处于点击时的当前页面

问题：

这个问题的产生源于运营人员反馈过来的一个需求，因为本次做的网站的新闻中心有公告通知与新闻动态两个大类（标签页控制，同一个页面地址），运营人员在测试使用的时候发现一个问题，当列表处在其它页面并且点击进详情返回列表页时，新闻列表显示的是公告通知第一页的信息……

解决方案：

	<p class="title" @click="goDetail(item.guid)">{{item.title}}</p>

methods: {
	getData() {
		// ...获取数据
		
		// Stage-3：清除缓存，完成闭环
		// 获取完毕后清除缓存，等待下次使用，这样就形成了闭环，然后同时将是否使用缓存的标识置为false以恢复watch里面的函数作用;
		if(res.success) {
			sessionStorage.removeItem(this.$route.name);
			this.isCached = false;
		}
		//End
      },
	goDetail(guid) {
		// Stage-1：设置缓存
		let currentArr = [this.active, this.queryInfo.index];
		let name = this.$route.name;
		sessionStorage.setItem(name, JSON.stringify(currentArr));
		// end

		this.$router.push({
			path: `/newsDetail`,
			query: {
				guid: guid
			}
		})
	}
},
created() {
	// Stage-2：读取缓存并做相应处理
	let arg = sessionStorage.getItem(this.$route.name);
	if(arg && arg != ''){
		this.isCached = true;    // 这里要将是否使用缓存参数设置为true，避免watch页面tab编号的方法将queryInfo.index还原为1
		this.active = JSON.parse(arg)[0];
		this.queryInfo.index = JSON.parse(arg)[1];
		this.getData();    // 由于设置isCached = true 导致tab索引变化时，不会自动获取数据，所以手动调一下加载数据的方法，然后再加载数据的方法里面有最后一步动作
	} else {
		this.isCached = false;
		this.active = 1;    // 初始化页面数据
	}
	// end
}