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. socket传送文件

    一.文件传送步骤 我们要利用socket来实现下载一个文件,该如何操作呢? 服务端: 读取文件名 判断文件是否存在 检测文件大小(用于和客户端对比判断文件是否传送完毕) 发送文件大小给客户端 等待客户 ...

  2. Nginx多个配置文件共用location配置

    一.应用情况 很多时候我们在一台服务器上部署了不止 一个项目,我们通过Nginx来代理,为了方便管理往往会将各个项目的配置分开写到不同的配置文件中,如: 在nginx.conf 文件中加上  incl ...

  3. tf.train.batch的偶尔乱序问题

    tf.train.batch的偶尔乱序问题 觉得有用的话,欢迎一起讨论相互学习~Follow Me tf.train.batch的偶尔乱序问题 我们在通过tf.Reader读取文件后,都需要用batc ...

  4. JS自学大全

    JS是从上往下执行的 console.log();输出语句console.warn();错误提示语句 黄色三角形感叹号console.error();错误提示 红色圆Xalert();弹窗docume ...

  5. 【转】ubuntu 11.04使用apt-get安装软件时一直提示E:unable to locate package

    问题: VMware虚拟机安装了ubuntu 11.04,在使用apt-get安装软件时一直提示E:Unable to locate package. 百度了原因,说是要更新源,使用命令:sudo a ...

  6. [ERROR] Too many connections 尚未解决

    [ERROR] - com.alibaba.druid.support.logging.Log4j2Impl.error(Log4j2Impl.java:53) - create connection ...

  7. oschina ios开发学习

    应该跟android版的类似,例如服务器端在oschina-prefix.pch里 #define api_news_list @"http://www.oschina.net/action ...

  8. Let's Encrypt 免费通配 https 签名证书 安装方法2 ,安卓签名无法认证!

    Let's Encrypt 免费通配 https 签名证书 安装方法 按照上文 配置完毕后你会发现 在pc浏览器中正常访问,在手机浏览器中无法认证 你只需要安装一个或多个中级证书 1.查看Nginx ...

  9. 2017ACM暑期多校联合训练 - Team 2 1006 HDU 6050 Funny Function (找规律 矩阵快速幂)

    题目链接 Problem Description Function Fx,ysatisfies: For given integers N and M,calculate Fm,1 modulo 1e ...

  10. JodaTime报时区异常错误

    在将爬下来的网页解析需要的字段批量入口的时候(逻辑类似下面): @Test public void test_001(){ String TIME = "1990-04-15"; ...