vue使用keepAlive实现前进后退功能

**

vue使用keepAlive实现前进后退功能

**
vue的keepAlive可以实现缓存组件的数据，避免后退时重新加载数据。（其实说白了，功能就是前进刷新，后退不刷新，还要保留之前浏览的位置）
**

写得非常乱，不想看的，想知道代码的直接看末尾

**

假设有ABC三个页面，对b页面按官网教程使用了keepAlive,c页面退回b页面，很好，没有重新请求数据，也返回了之前的浏览位置，但退回到A页面后，重新点击进入b页面，数据没有更新，还是原来的数据，（组件重用的情况下，这个问题更加严重，只有一个组件还好点，数据不刷新，人家可能也没啥感觉，但组件重用，人家点击的明明是不同板块，但显示的全是第一次点击的数据）
这里不多说一些重复的东西，要解决这个问题，必须要清楚了解vue在使用了keepAlive后的生命周期，设置了keepAlive缓存的组件：

   第一次进入：beforeRouterEnter ->created->…->activated->…->deactivated

   后续进入时：beforeRouterEnter ->activated->deactivated

可以看出，只有第一次进入该组件时，才会走created钩子，而需要缓存的组件中activated是每次都会走的钩子函数。
我第一次实现这个功能是按照这个教程改的，但我觉得还不够简洁，所以自己重新琢磨了一下
不想写太多了，重复的东西写了也没多大用处，在我试着简洁我的代码的时候，让我发现个奇怪的事情，就是当列表组件给重用的时候，beforeRouteLeave只会在第一次点击进去的那个路由地址里面点击前进或者后退时，beforeRouteLeave里面的代码才会触发，其它路由地址使用这个组件并不会触发这个beforeRouteLeave里面的代码，所以我只好在watch里面监听路由是否已经改变来执行代码了
第一种方案。我现在用的
方案好处是只在B页面和路由里有设定，A和C不需要另写代码，这样关联就没那么多，但代码逻辑的话理解上就比较困难一些，路由里面只启用了keepAlive:true
B页面

data() {
			return {
				newsList: [],
				firstEnter:true,
			}
		},
created(){
			this.firstEnter = false;
			this.getNewList();
		},
		watch:{
			"$route":function(to,from){
				if(to.meta.tree == 0) {//后退，tree 0为A页面，1为B页面，2为C页面
					this.firstEnter = true;
				}
			}
		},
		activated() {
		    if(this.firstEnter){           
		    	this.firstEnter = false;
		    	....// 清空原有数据
		        this.newsList = []; // 清空原有数据,初始化
		        this.getNewList(); // 这是我们获取数据的函数
		    } 
		},
		//使用keepAlive后，触发顺序，第一次进入created->activated,所以路由文件对应的keepAlive为true,不然无法激活activated组件，
		//created获取数据操作后要立马将firstEnter设为false,避免后续执行activated时重复获取数据
		//所以第一次要在created里面获取一次数据，因为activated主要是为了第二次以后更新数据用的
		//第二次进入组件，不会触发created,直接触发activated,所以activated里面的firstEnter要为true,不然为false意味操作不是前进操作，不会重新获取数据
		//watch里面的意思是如果是返回上一页则初始化firstEnter，避免后续进入其它路由地址不更新数据

第二种方案,就是链接的方案
路由命名两个属性，一个keepAlive为true, 一个为isUseCache为false
好处是相对容易理解，但逻辑有点过于分散
A页面

beforeRouteLeave(to, from, next) {
	      if (to.meta.tree==1) {
	         to.meta.isUseCache = false; 
	      } 
	      next();
	    }

B页面

activated() {
		    if(!this.$route.meta.isUseCache){            
		        this.newsList = []; // 清空原有数据
		        this.beginNum = 1;
		        this.getNewList(); // 这是我们获取数据的函数
		    } 
		},

其实原理都是一样的，第一个方案只是变个法子，把路由的isUseCache改成了组件内部的firstEnter
第一个方案流程图

第二个方案流程图

写的非常乱，总结一句话就是直接抄这个就行，没那么多弯弯道道

data() {
			return {
				newsList: [],
				firstEnter:true,
			}
		},
created(){
			this.firstEnter = false;
			this.getNewList();
		},
		watch:{
			"$route":function(to,from){
				if(to.meta.tree == 0) {//后退，tree 0为A页面，1为B页面，2为C页面
					this.firstEnter = true;
				}
			}
		},
		activated() {
		    if(this.firstEnter){           
		    	this.firstEnter = false;
		    	....// 清空原有数据
		        this.newsList = []; // 清空原有数据,初始化
		        this.getNewList(); // 这是我们获取数据的函数
		    } 
		},