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. python使用pwd和grp操作unix用户及用户组

    1.pwd模块 pwd模块提供了一个unix密码数据库即/etc/passwd的操作接口,这个数据库包含本地机器用户帐户信息 常用操作如下: pwd.getpwuid(uid):返回对应uid的示例信 ...

  2. php桶排序简单实现

    桶排序中最重要的环节是映射函数. 初步学习桶排序的过程中,映射比较简单.实现代码如下: /** * 第一种桶排序的办法,每个桶存储相同值的数据 * */ function bucketSort($no ...

  3. centos6.5 mqtt安装

    CentOs 6.5 MQTT 安装部署 所需安装包: libwebsockets-v1.6-stable.tar.gz,mosquitto-1.4.8.tar.gz 1.安装依赖 # yum -y ...

  4. html5的web存储详解

    以前我们在本地存储数据都是用document.cookie来存储的,但是由于其的存储大小只有4K左右,解析也很复杂,给开发带来了诸多的不便.不过现在html5出了web的存储,弥补了cookie的不足 ...

  5. Assert 的用法

    Assert Assert是断言的意思,头文件为assert.h, assert是一个宏 功 能: 测试一个条件并可能使程序终止 用 法: void assert(int test); 在单元测试中经 ...

  6. Dubbo+Zookeeper+SpringMVC+Maven整合实现微服务项目

    互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,Dubbo是一个分布式服务框架,在这种情况下诞生的.现在核心业务抽取出来,作为独立的服务,使 ...

  7. new Date('2014/04/30') 和 new Date('2014-04-30') 的区别

    new Date('2014/04/30') Wed Apr 30 2014 00:00:00 GMT+0800 (中国标准时间) new Date('2014-04-30'); Wed Apr 30 ...

  8. [php]apache虚拟主机配置

    1.所谓虚拟主机的配置,即url与磁盘目录的绑定 2.在httpd.conf中查询Virtual host,发现有注释说明需要在conf/extra/httpd-vhosts.conf中进行配置. 3 ...

  9. 蓝色的cms企业记账管理后台模板源码——后台

    链接:http://pan.baidu.com/s/1bpxKGBP 密码:suda

  10. 初窥ThinkPHP

    MVC全称(Model View Controller) Model:模型(可以理解位数据库操作模型) View:视图(视图显示) Controller:(控制器) 简单的说框架就是一个类的集合.集合 ...