缓存操作与组件路由
Keep-alive
缓存
在web服务请求当中，有部分数据属于频繁被查询，比如，用户信息，logo信息。将这些数据存储到一个方便查询，或者直接获取的位置上，来减轻服务器查询压力。这种策略叫做缓存。
VUE当中keep-alive只是基于前端组件的狭义的缓存，通常和component标签结合使用，对动态加载的组件进行缓存
keep-alive缓存的基本使用
就是使用keep-alive标签包围component标签，这样动态加载的组件就会被缓存
定制缓存
include
指定要缓存的组件
exclude
指定不需要缓存的组件
缓存的生命周期
activated: 激活组件的时候执行，通常会连带的加载数据
deactivated：组件失活执行，通知父组件修改样式或者状态
两个生命周期必须结合keep-alive标签使用
路由
路由是用来映射web资源的地址，通常就是url(统一资源定位符)，vue通过插件vue-router实现了前端路由。使用vue-router之后，可以完成地址和组件之间的关系。
vue指定的路由是前端路由
路由安装
在创建项目的时候选择有router的项目模板
在已有的项目也可以手动的安装路由
npm i vue-router -S
基本使用流程
创建路由文件
定义一个router目录
定义路由.js文件
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router) //让vue使用Router
import Index from "../components/Index.vue" //导入组件
import Food from "../components/Food.vue" //导入组件
const router = [
? {
? ? ? ?path: "/index",
? ? ? ?component: Index
? },
? {
? ? ? ?path: "/food",
? ? ? ?component: Food
? }
? ?
] //路由的规则
export default new Router({
? ?routes: router
}) //导出路由对象，对象已经加载规则安装路由
使用路由
路由懒加载
当路由多的时候，每次调用路由文件，整个文件当中所有的导入的组件语句都会执行一遍，导致了资源损耗，所以采用函数包裹导入语句，这样只有执行到这个路由，采用调用函数，才会导入组件，这样的方法，我们称为路由懒加载。
路由重定向
重定向，指访问路由后，路由指向另外的一个路由地址。
比如登录成功返回首页，实际上就是 登录，如果成功跳转到首页。
redirect
重定向的http状态码是3*，常见的是304
路由的样式
vue当中的router-link标签，在默认选中的情况下，有默认的class名称，我们可以通过设置这个样式来定义导航被激活的样式
当vue框架和三方框架结合使用的时候。导航激活的样式名称是三方ui框架制定的，所以需要从根本上修改。
路由的严格匹配
vue-router默认采用模糊匹配的方式，完成路由和组件的对应，但是会出现重复匹配的问题：
/ /food 当模糊模式下，/food这个匹配会匹配成功 / 和 /food,所以需要通过给router-link添加exact属性来启动严谨模式
404路由
嵌套路由
嵌套路由是讲组件的路由写道父组件的路由配置的childre属性当中，当页面进行渲染，子组件的内容会渲染到父组件的router-view标签处。
编程式路由
this.$router
这个当中存放了一些方法
this.$router.push 跳转到指定路由，形成跳转记录 this.$router.replace 跳转到指定路由，替换跳转记录 this.$router.go 跳转指定步 this.$router.back 后退一步 this.$router.forward 前进一步
缓存和路由基础
路由传参：
设置路由参数：
在路由规则上使用：变量
获取是使用this.$route.params