缓存操作与组件路由

缓存操作与组件路由

Keep-alive

缓存

在web服务请求当中,有部分数据属于频繁被查询,比如,用户信息,logo信息。将这些数据存储到一个方便查询,或者直接获取的位置上,来减轻服务器查询压力。这种策略叫做缓存。

VUE当中keep-alive只是基于前端组件的狭义的缓存,通常和component标签结合使用,对动态加载的组件进行缓存

keep-alive缓存的基本使用

就是使用keep-alive标签包围component标签,这样动态加载的组件就会被缓存缓存操作与组件路由_第1张图片

定制缓存

include

指定要缓存的组件缓存操作与组件路由_第2张图片

exclude

指定不需要缓存的组件

缓存操作与组件路由_第3张图片

缓存的生命周期

activated: 激活组件的时候执行,通常会连带的加载数据

deactivated:组件失活执行,通知父组件修改样式或者状态

两个生命周期必须结合keep-alive标签使用缓存操作与组件路由_第4张图片

路由

路由是用来映射web资源的地址,通常就是url(统一资源定位符),vue通过插件vue-router实现了前端路由。使用vue-router之后,可以完成地址和组件之间的关系。

vue指定的路由是前端路由

路由安装

在创建项目的时候选择有router的项目模板

缓存操作与组件路由_第5张图片缓存操作与组件路由_第6张图片缓存操作与组件路由_第7张图片缓存操作与组件路由_第8张图片

在已有的项目也可以手动的安装路由

npm i vue-router -S

基本使用流程

创建路由文件

定义一个router目录缓存操作与组件路由_第9张图片

定义路由.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
}) //导出路由对象,对象已经加载规则

安装路由缓存操作与组件路由_第10张图片

使用路由缓存操作与组件路由_第11张图片

路由懒加载

当路由多的时候,每次调用路由文件,整个文件当中所有的导入的组件语句都会执行一遍,导致了资源损耗,所以采用函数包裹导入语句,这样只有执行到这个路由,采用调用函数,才会导入组件,这样的方法,我们称为路由懒加载。缓存操作与组件路由_第12张图片

路由重定向

重定向,指访问路由后,路由指向另外的一个路由地址。

比如登录成功返回首页,实际上就是 登录,如果成功跳转到首页。

redirect缓存操作与组件路由_第13张图片

重定向的http状态码是3*,常见的是304

路由的样式

vue当中的router-link标签,在默认选中的情况下,有默认的class名称,我们可以通过设置这个样式来定义导航被激活的样式缓存操作与组件路由_第14张图片

当vue框架和三方框架结合使用的时候。导航激活的样式名称是三方ui框架制定的,所以需要从根本上修改。缓存操作与组件路由_第15张图片

路由的严格匹配

vue-router默认采用模糊匹配的方式,完成路由和组件的对应,但是会出现重复匹配的问题:

/
/food

当模糊模式下,/food这个匹配会匹配成功 / 和 /food,所以需要通过给router-link添加exact属性来启动严谨模式

404路由缓存操作与组件路由_第16张图片

嵌套路由

缓存操作与组件路由_第17张图片

嵌套路由是讲组件的路由写道父组件的路由配置的childre属性当中,当页面进行渲染,子组件的内容会渲染到父组件的router-view标签处。缓存操作与组件路由_第18张图片

编程式路由

this.$router

这个当中存放了一些方法

this.$router.push  跳转到指定路由,形成跳转记录
this.$router.replace 跳转到指定路由,替换跳转记录
this.$router.go 跳转指定步
this.$router.back 后退一步
this.$router.forward  前进一步

缓存和路由基础

路由传参:缓存操作与组件路由_第19张图片缓存操作与组件路由_第20张图片

设置路由参数:

在路由规则上使用:变量

获取是使用this.$route.params

你可能感兴趣的:(Vue,缓存,vue.js,组件化)