有tab栏切换通常都是会直接刷新界面，现在有一个需求就是说当我点击tab切换或者菜单切换的时候，原本写的查询不变。
1、在layout中加入keep-alive,进行缓存
这时候，当你输入查询条件，进行切换的时候，你会发现， 效果达到了。但是如果你够细心，你会发现，如果有联动的界面，从a界面点击一条数据进入b界面，数据不再更新，一直保持着第一次的那条数据。
为什么会这样呢？
原因是vue的生命周期函数mounted、created只有首次进入才会执行，或者你刷新浏览器才会执行一次；之后无论你怎么切换菜单，都不会再执行。
可是，b界面的数据，我们需要在进入的时候，就拿到从a界面传过来的参数，进行赋值，然后调用接口等等。当生命周期失效了，此时该怎么办呢？
2、使用路由钩子函数
/** 当启用keep-alive后，使用路由钩子函数进行执行 */
beforeRouteEnter(to, from, next) {
next(vm=>{// 这里的vm指的就是vue实例，可以用来当做this使用
// 调用你的方法或者赋值操作
vm.list = JSON.parse(localStorage.getItem('params')).detail // 赋值
vm.getList(); // 调用方法
})
},注意在钩子函数中，一切要用到this的，请用vm
此时，问题都解决了。但是如果你足够的细心，那么你很快就会发现：当从a界面点击表格中某一条数据，进入b界面，在b界面输入查询条件，然后点击tab栏切换或者菜单栏切换，a界面的查询条件和b界面的查询条件都不会变化，这种情况就是需求要求的，没问题；但是，你会发现当你在a界面点击其他的数据，进行跳转到b界面时，此时b界面的查询条件还是上次输入的查询条件，需要手动的清空，此时与需求期望不符。
3、解决跳转时数据更新，查询条件不更新的问题
这个时候，我们可以用watch监听来实现
/** 当启用keep-alive后，使用监听 */
watch:{
// 监听list.id的值是否发生变化，如果变了，就需要还原查询条件
'list.id':{
handler(newVal,odVal) {
console.log(newVal,odVal,'fffffffffffffffff')
if (newVal != odVal) {
// 还原到最初的查询条件
}
},
deep: true,
immediate: true
}
},