1.创建和路由跳转
1.1路由---一级路由
1.2搜索界面样式
2输入框的自动聚焦 Vue.use&&防抖
2.1自动获取焦点---通过插件Vue.use()
使用创建的自定义指令：
2.2输入框防抖----当多次点击时只执行最后一次的操作---使用定时器
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
减少无用的触发逻辑代码执行
此处有错误，清除定时器应该写在外面
总结
- 函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
- 函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。
3.联想菜单实现
3.1联想菜单的实现---搜素建议
3.1.1铺设样式---放到div或者重新弄个组件
3.1.2写接口方法，调用
接口：
调用：
遍历数组
3.2清空处理
整理后代码：
3.3关键字高亮----两种写法----易错
高亮功能的实现思路：
思路一:replace方法+标签+v-html+正则表达式
replace&&replaceAll方法
replace只替换一次，替换第一个符合条件的，而replaceAll，全部替换
不使用v-html无法解析
此时对于大小写无法识别，想要识别要借助正则表达式
改进后完整代码：
3.4历史记录----路由跳转并传参
3.4.1铺设
3.4.2跳转传参到搜索结果页面----向路由界面传参----不是通过接口传参
首先创建路由：一级路由，绑定点击事件，点击时进行路由的跳转 输入框输入回车后，跳转到搜索结果页----组件自身的search事件 点击联想菜单项后，跳转到结果页 点击历史记录，跳转到搜索结果页 ----------------虽然内部代码简单，但尽量还是分开写，增强可读性
总结
路由跳转传参有两种方式：
方式1:路径/值----前提：路由规则：变量名----接收:route.query 这两种方式，都可以自己在path后面路径拼接 //还可以用¥router.push配置项和query让js代码来帮忙拼接
3.4.3历史记录优化----v-if----v-else的使用
1.建议与历史记录只能出现一个 v-if
错误原因：--------要用数组的长度
3.5历史记录本地存储及清空-----watch监听属性的使用----涉及变化
3.5.1历史记录本地存储-----watch监听属性的使用
目标：输入框按回车，保存搜索词---点击联想菜单的项保存菜单项值 把字符串放到数组里面去
本地存储的使用------------------localStorage
此时数据还是无法存储，隐藏的原因是因为-------watch也异步，在路由跳转后执行，使用计时器放到前面------后续eventloop补充
3.5.2去重和清空------set&&map
数组去重：ES6新增了2种引用数据类型（之前Array，Object），新增了Set、Map
Set:无序不重复的value集合体（无下角标）
特点：你传入的是数组类型，如果有重复的元素，会自动清理掉重复元素，返回无重复的set对象
注意：如果值是对象比较的是对象内存地址
去重写法：
清空写法：
4.列表数据获取------ SearchResult.vue界面
4.1接口准备及使用
接口封装：
重点----拿到路由的参数
4.2列表铺设---复用ArticleItem组件
复用的组件尽量用来引用接口，需要将ArticleItem变为全局的组件，放到大的components下面
完成组件间数据交互：
4.3去除搜索界面的x----v-if
父组件：
4.4加载更多----list组件
组件使用：把要展示的数据进行包裹
进行逻辑判断：onload
最为重要的一点：将 :immediate-check="false"设为false,否则会报错
4.5图片403和图片404的错误
后端保存文章的数据，文章的图片来自于其他服务器路径------图片是第三方图片，后端知识保存了图片的地址，后端会把数据和图片返回给前端，前端铺设页面，用img标签，如果第三方的图片被删除掉，那么就会报错 如何解决？
4.5.1 404无法解决，与后端一起解决
前端可以做的就是使用img组件进行占位
解决方案：
4.5.2 403问题
无权利去请求改地址，图片做了防盗链处理，防止我们用img标签来请求图片，不想让图片被别人的网站所引用，后端判断请求时，Reffer字段来源是不是自己的地址
解决：meta不让浏览器携带请求头里面的reffer，让后端判断失效
在html中添加
需要重启服务
