Vue路由开启keep-alive缓存页面
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缓存页面的更多相关文章
- Vue路由开启keep-alive时的注意点
Vue路由开启keep-alive时的注意点 这个不是业务的要求,但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM,觉得作为一个前端工程师有必要优化下的加载逻辑,正好vue提供了 ke ...
- Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决
今天碰到一个问题 vue路由跳转到新的页面时会直接显示页面最底部 正常情况下是显示的最顶部的 而且好多路由中不是全部都是这种情况 折腾好长时间也没解决 最后在网上找到了解决办法 其实原理很 ...
- Vue路由守卫(跳转页面置顶的处理方)
在用Vue 框架开发时,在电脑调试没有任何问题,但是用手机调试时会发现页面跳转的不对.就是跳转时页面展示的滑动位置不对,会保留上次跳转页面时的跳转位置.因此需要对页面的路由跳转进行优化,需要用到Vue ...
- Vue 路由拦截(对某些页面需要登陆才能访问)
前言 做项目的时候有个需求,就是发现没有登录,竟然也可以进入我的主页,这样肯定是不能容忍的.于是就要让他进入主页的时候,加个判断是否有登录,若没有登录,则返回登录界面,登录成功后还可以跳转到之前进入的 ...
- Vue路由跳转时修改页面标题
1 在main.js中添加如下代码 import Vue from 'vue' import App from './App.vue' import router from './router' // ...
- vue 路由传参中刷新页面参数丢失 及传参的几种方式?
在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...
- vue中router使用keep-alive缓存页面的注意事项
<keep-alive exclude="QRCode"> <router-view></router-view> </keep-aliv ...
- vue 路由跳转记住当前页面位置
从列表页面跳去详情页面, 在列表页面的生命周期:deactivated 中把当前的scrollTop位置存下来,可以存在localstorage中,也可以存在vuex中, 从详情页面返回列表页面:a ...
- VUE路由过度效果vs缓存
app页面 router.js
随机推荐
- org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named 'sessionFactory' is defined
请检查你在web.xml中加载spring.xml文件的时候没有加载成功,看你的路径是否正确 <context-param> <param-name>contextConfi ...
- [DeeplearningAI笔记]卷积神经网络1.9-1.11池化层/卷积神经网络示例/优点
4.1卷积神经网络 觉得有用的话,欢迎一起讨论相互学习~Follow Me 1.9池化层 优点 池化层可以缩减模型的大小,提高计算速度,同时提高所提取特征的鲁棒性. 池化层操作 池化操作与卷积操作类似 ...
- 洛谷 2186 小Z的栈函数
https://www.luogu.org/problem/show?pid=2186 题目描述 小Z最近发现了一个神奇的机器,这个机器的所有操作都是通过维护一个栈来完成的,它支持如下11个操作: N ...
- JavaScrip入门笔记(二)
使用JS完成表格的隔行换色 新标签的学习 <thead> <tr> <th></th> </tr> </thead> <t ...
- 【BZOJ4870】组合数问题(计数DP,快速幂)
题意: 1 ≤ n ≤ 10^9, 0 ≤ r < k ≤ 50, 2 ≤ p ≤ 2^30 − 1 思路:From http://blog.csdn.net/qq_33229466/artic ...
- 【BZOJ】2693: jzptab 莫比乌斯反演
[题意]2154: Crash的数字表格 莫比乌斯反演,多组询问,T<=10000. [算法]数论(莫比乌斯反演) [题解]由上一题, $ans=\sum_{g\leq min(n,m)}g\s ...
- 20155117王震宇 实验一《Java开发环境的熟悉》实验报告
(一)使用JDK编译.运行简单的java程序 命令创建实验目录 输入mkdir 2051117 创建以自己学号命名的文件夹,通过cd命令移动到指定文件夹,输入mkdir exp1创建实验文件夹. 打开 ...
- virtual和abstract的区别和联系
壹. 相同 他们有些相似.有些场景用哪个都行! 1. 修饰父类.让子类重写 virtual和abstract都是用来修饰父类的,通过覆盖父类的定义,让子类重新定义. 2. 都用必须public 如 ...
- 快速入门react
安装react npm install creat-react-app -g这里直接安装react的一个脚手架,里面包含了要用到的许多东西,帮助快速入门react 创建新项目 create-react ...
- Linux Deploy 使用 Repository部署Linux系统
Linux Deploy 使用 Repository部署Linux系统 为了解决镜像不稳定导致包下载错误,能得到一个稳定环境,可以使用linux deploy导出功能. 这里提供两个制作好的包 用户名 ...