正文部分

• 问题

<template slot="title">
  	<i class="el-icon-location"></i>
		导航一
</template>

• 原因

在vue2.6.0中，具名插槽的使用方式已经改变了，所以是渲染不出来的。

• 解决方法

vue2.6.0之后，使用 v-slot 代替了 slot

参考官网https://cn.vuejs.org/v2/guide/components-slots.html

//第一种
<template v-slot:title="title">
  <i class="el-icon-location"></i>
	导航一
</template>

//第一种的省略写法
<template v-slot:title>
  <i class="el-icon-location"></i>
	导航一
</template>

//第二种（element-ui官网使用，其实也是第一种的简写。v-slot可以简写成#）
<template #title>
  <i class="el-icon-location"></i>
	导航一
</template>

每天面试题

<keep-alive></keep-alive>

• 使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
• keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性能。[keep-alive用于保存组件的渲染状态]
• 页面回退，不会重新执行该页面的代码，只会从缓存中加载之前已经缓存的页面，这样可以减少加载时间及性能消耗，提高用户体验性。
• keep-alive的实现用到了LRU策略，将最近访问的组件push到this.keys最后面，this.keys[0]也就是最久没被访问的组件，当缓存实例超过max设置值，删除this.keys[0]
• 如果需要频繁切换路由，这个时候就可以考虑用keep-alive了，来达到避免数据的重复请求的目的。

LRU策略--缓存淘汰策略
LRU（Least recently used，最近最少使用）算法根据数据的历史访问记录来进行淘汰数据，其核心思想是“如果数据最近被访问过，那么将来被访问的几率也更高”。

vue-router的两种模式

对于Vue这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-Router存在的意义。

前端路由的核心，就在于——改变试图的同时不会向后端发出请求。

hash模式

• URL的hash URL的hash也就是锚点(#), 本质上是改变window.location的href属性.。可以通过直接赋值location.hash来改变href, 但是页面不发生刷新
• hash - 即地址栏URL中的 # 符号。比如：http：//www.abc.com/#/douya,hash的值为#/douya.它的特点在于：hash虽然出现在URL中，但不会被包括在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

history模式

• history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面。

1. history.pushState()
2. history.replaceState()
3. history.go()
4. history.back() 【等价于 history.go(-1)】
5. history.forward() 【等价于 history.go(1)】

go,back,forword三个接口等同于浏览器界面的前进后退

• 利用了HTML5 History Interface中新增的pushState()和replaceState（）方法。（需要特定浏览器支持）。这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go的基础上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的URL，但浏览器不会即向后端发送请求。

两种模式的区别

1. pushState()设置的新URL可以是与当前URL同源的任意URL；
2. hash只可修改#后面的部分，因此只能设置与当前URL同文档的URL；

3. pushState()设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；
4. hash设置的新值必须与原来不一样才会触发动作将记录添加到栈中；

5. pushState()通过stateObject参数可以添加任意类型的数据到记录中；
6. hash只可添加短字符串；

7. pushState()可额外设置title属性供后续使用。

8. hash 模式下，仅hash符号之前的内容会被包含在请求中，如http://www.abc.com,因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误。
9. history模式下，前端的URL必须和实际向后端发起请求的URL一致。如htttp://www.abc.com/wujiaxin/id。如果后端缺少对/wujiaxin/id 的路由处理，将返回404错误

vue-router有哪几种导航钩子（导航守卫）？

• 全局守卫：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
• 局部守卫：是指在组件内执行的钩子函数，类似于数组内的生命周期函数，相当于为配置路由的组件添加的生命周期钩子函数。
• 路由独享守卫：是指在单个路由配置的时候也可以设置的钩子函数，且只能在这个路由下起作用

?? ???