mode:hash模式下:

HTML部分:

<template>
<div id="app">
<keep-alive> <!--使用keep-alive会将页面缓存-->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>

 路由部分:

{
path: '/home',
name: '首页',
menuShow: true,
iconCls: 'home_light.svg',
component: Home,
meta:{keepAlive:true}
}
页面部分:
//缓存页面
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = true; // B 跳转到 A 时,让 A 缓存,即不刷新(代码写在B页面)
next();
} //不缓存页面
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = false; // B 跳转到 A 时,让 A 不缓存,即刷新(代码写在B页面)
next();
}

  

  

Vue路由开启keep-alive缓存页面的更多相关文章

  1. Vue路由开启keep-alive时的注意点

    Vue路由开启keep-alive时的注意点   这个不是业务的要求,但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM,觉得作为一个前端工程师有必要优化下的加载逻辑,正好vue提供了 ke ...

  2. Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决

    今天碰到一个问题   vue路由跳转到新的页面时会直接显示页面最底部  正常情况下是显示的最顶部的  而且好多路由中不是全部都是这种情况  折腾好长时间也没解决  最后在网上找到了解决办法 其实原理很 ...

  3. Vue路由守卫(跳转页面置顶的处理方)

    在用Vue 框架开发时,在电脑调试没有任何问题,但是用手机调试时会发现页面跳转的不对.就是跳转时页面展示的滑动位置不对,会保留上次跳转页面时的跳转位置.因此需要对页面的路由跳转进行优化,需要用到Vue ...

  4. Vue 路由拦截(对某些页面需要登陆才能访问)

    前言 做项目的时候有个需求,就是发现没有登录,竟然也可以进入我的主页,这样肯定是不能容忍的.于是就要让他进入主页的时候,加个判断是否有登录,若没有登录,则返回登录界面,登录成功后还可以跳转到之前进入的 ...

  5. Vue路由跳转时修改页面标题

    1 在main.js中添加如下代码 import Vue from 'vue' import App from './App.vue' import router from './router' // ...

  6. vue 路由传参中刷新页面参数丢失 及传参的几种方式?

    在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...

  7. vue中router使用keep-alive缓存页面的注意事项

    <keep-alive exclude="QRCode"> <router-view></router-view> </keep-aliv ...

  8. vue 路由跳转记住当前页面位置

    从列表页面跳去详情页面, 在列表页面的生命周期:deactivated  中把当前的scrollTop位置存下来,可以存在localstorage中,也可以存在vuex中, 从详情页面返回列表页面:a ...

  9. VUE路由过度效果vs缓存

    app页面 router.js

随机推荐

  1. java 关于值引用、地址引用的问题

    8种基本引用类型 四种整数类型(byte.short.int.long) 两种浮点数类型(float.double) 一种字符类型(char) 一种布尔类型(boolean) 以及如String, f ...

  2. SPOJ DQUERY 离线树状数组+离散化

    LINK 题意:给出$(n <= 30000)$个数,$q <= 2e5$个查询,每个查询要求给出$[l,r]$内不同元素的个数 思路:这题可用主席树查询历史版本的方法做,感觉这个比较容易 ...

  3. C11构造函数的改善

    1.委托构造函数 委托构造函数就是允许在同一个类中一个构造函数可以调用另一个构造函数,从而在初始化时简化变量的初始化. class CTest { public: int x; int y; int ...

  4. docker使用host模式启动nginx

    mkdir -p /root/nginx-docker-demo/html docker run --network=host --rm --name mynginx --volume /root/n ...

  5. [译]Quartz.Net 框架 教程(中文版)2.2.x 之第三课 更多关于Jobs和JobDetails

    第三课 更多关于Jobs和JobDetails 在这二课我们已经学习到,Jobs接口非常容易实现,只有一个execute方法.我们需要再学习一些知识去理解jobs的本质,Job接口的execute方法 ...

  6. 工作中常用的Git操作--------(一)

    今天主要记录一下平常工作当中使用的git操作: 1.git的安装这里省略: 2.git的操作指令: 在项目开发中,经常是拉去经理已经搭建好的一个项目,也就是给我们一个git地址.比如:http://g ...

  7. CounterBreach安装测试的全部过程

    CounterBreach安装测试的全部过程 1安装数据库审计的网关 Admin进入 Impcfg初始化 选择网关 是否替换另一个网关? 否 是否改变默认管理口 设置管理口地址 192.168.1.2 ...

  8. 继电器是如何成为CPU的(1)【转】

    转自:http://www.cnblogs.com/bitzhuwei/p/from_relay_to_tiny_CPU.html 阅读目录(Content) 从电池.开关和继电器开始 用继电器做个与 ...

  9. elasticsearch集群介绍及优化【转】

    elasticsearch用于构建高可用和可扩展的系统.扩展的方式可以是购买更好的服务器(纵向扩展)或者购买更多的服务器(横向扩展),Elasticsearch能从更强大的硬件中获得更好的性能,但是纵 ...

  10. JVM的分区+查看GC对象是否存活+3种GC算法+7种垃圾收集器+如何减少GC次数

    一.JVM的分区:   1.程序计数器(私有) 程序计数器是一块较小的内存分区,你可以把它看做当前线程所执行的字节码的指示器. 在虚拟机的概念模型里,字节码解释器工作时,就是通过改变计数器的值来选择下 ...