总结
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
2.搜索结果列表页面==>点击进入详情页==>从详情页返回列表页时，要保存上次已经加载的数据和自动还原上次的浏览位置。
- 缓存组件，vue2中提供了keep-alive。首先在我们的app.vue中定义keep-alive
这里是根据路由中的meta源信息中的keepAlive字段来判断当前路由组件是否需要缓存。这里的meta的keepAlive是我们自定义的，当然你也可以叫别的名字。
- 下面在router/index.js即我们的路由文件中，定义meta信息：
// list是我们的搜索结果页面
{
path: ‘/list’,
name: ‘List’,
component: resolve => require([‘@/pages/list’], resolve),
meta: {
isUseCache: false, // 这个字段的意思稍后再说
keepAlive: true // 通过此字段判断是否需要缓存当前组件
}
},
上面的component: resolve => require([‘@/pages/list’], resolve)这里的组件引入方式可能和大家平时写的有些不一样，这里是为了路由的懒加载用的，大家可以忽略。按照正常的import引入也可以，
- 刷新数据or缓存数据的实现：
说这之前，先简单说一下和缓存相关的vue钩子函数。
设置了keepAlive缓存的组件：
第一次进入：beforeRouterEnter ->created->…->activated->…->deactivated
后续进入时：beforeRouterEnter ->activated->deactivated
可以看出，只有第一次进入该组件时，才会走created钩子，而需要缓存的组件中activated是每次都会走的钩子函数。所以，我们要在这个钩子里面去判断，当前组件是需要使用缓存的数据还是重新刷新获取数据。思路有了，下面我们来实现：
// list组价的activated钩子
activated() {
// isUseCache为false时才重新刷新获取数据
// 因为对list使用keep-alive来缓存组件，所以默认是会使用缓存数据的
if(!this.$route.meta.isUseCache){
this.list = []; // 清空原有数据
this.onLoad(); // 这是我们获取数据的函数
}
},
这里的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是重新刷新数据的。
至此，一个前进刷新、后退返回的功能基本完成了。
- 在一种情况，缓存页 进入的不是detail页面，而是去的别的页面，返回的时候也不让缓存也刷新，
在进入的页面中写钩子函数：
beforeRouteLeave (to, from, next) {
console.log(to.name)
console.log(from.name)
//打印一下值 哪一个打印的值等于缓存页面的name 那钩子if 判断语句中就写to.name或者 from.name
//条件和判断语句中一起变动， 要么都是to. 要么都是from.
if (to.name == ‘List’) {
to.meta.isUseCache = true;
}
next();
},
这种缓存页面进入别的页面，从别的页面返回缓存页面，不刷新，其实就是当返回缓存页面的时候，在activated钩子函数进入的是else条件语句，而不是进入的刷新页面语句
不管是列表缓存页面进入详情页，还是进入其他的页面，返回时位置不变，是要和滚动事件搭配使用
//1.给窗口添加滚动事件
window.addEventListener(“scroll”, () => {
最后
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。
911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
