缓存操作与组件路由

缓存操作与组件路由

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