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. vue-router的link样式设置问题

    发现router-link添加上去后文字上会出现下划线,打开调试工具发现router-link其实是由a来实现的,在reset的时候 a { text-decoraction: none; } 至于点 ...

  2. apache源码安装必须依赖的库apr----/etc/ld.so.conf 文件介绍

    Apache所依赖的库,封装了各个系统相关的API等.虽然都是Apache开发的,但是现在最新版本的Apache和APR源码是分开的.要编Apache就必须使用APR. /etc/ld.so.conf ...

  3. springsecurity 表达式一览

    表达式 描述 hasRole([role]) 当前用户是否拥有指定角色. hasAnyRole([role1,role2]) 多个角色是一个以逗号进行分隔的字符串.如果当前用户拥有指定角色中的任意一个 ...

  4. iOS数据存取---iOS-Apple苹果官方文档翻译

    CHENYILONG Blog iOS数据存取---iOS-Apple苹果官方文档翻译 数据存取/*技术博客http://www.cnblogs.com/ChenYilong/ 新浪微博http:// ...

  5. python3爬虫.1.简单的网页爬虫

    此为记录下我自己的爬虫学习过程. 利用url包抓取网页 import urllib.request #url包 def main(): url = "http://www.douban.co ...

  6. filezilla显示隐藏文件

    我们在习惯使用flashfxp等工具,但是随着主机商限制较多,这些老的FTP工具不怎么好用了,比如主机商会推荐使用到Filezilla等工具.但是比如息壤主机,我们在管理linux环境下htacess ...

  7. uboot之---make smdk2410_config命令详细解析

    先进入顶层Makefile.有很多相对不同板子的配置,如: gec2440_config:unconfig @$(MKCONFIG) $(@:_config=) arm arm920t gec2440 ...

  8. __inet_insert_ifa/__inet_del_ifa

    /* 添加ip地址 主地址添加到最后一个满足范围的主地址后面 从地址添加到整个列表后面 若列表中存在与插入地址在同一子网的地址,则 要求ip地址不同且范围相同,并且插入地址认为是从地址 */ stat ...

  9. option和 usb-serial驱动基本区别

    option.c This driver exists because the "normal" serial driver doesn't work too well   wit ...

  10. 正排索引(forward index)与倒排索引(inverted index) (转)

    一.正排索引(前向索引) 正排索引也称为"前向索引".它是创建倒排索引的基础,具有以下字段. (1)LocalId字段(表中简称"Lid"):表示一个文档的局部 ...