问题 在路由切换时不需要每次 点击都刷新子路由   尤其是在form表单的情况下  不能让用户 输入一半之后点击其他页面  再点回来 表单数据不见了

解决方案  

vue 2.0     之中  有keep-alive   详情 见Vue 官网

<keep-alive>
<router-view :key="key"></router-view>
</keep-alive>

如果想要这个  单个子路由 不刷新    只需要控制 key    key值不变 缓存   一直存在   想要路由刷新 将key值  改为  前面没有的

<template>
<section class="app-main">
<transition name="fade" mode="out-in"> <keep-alive>
<router-view :key="key"></router-view>
</keep-alive>
</transition>
</section>
</template> <script>
export default {
name: 'AppMain',
computed: {
key() {
if(this.$route.name==undefined&& this.$route.path=='/home'){
//页面第一次加载时 清空 tab 标签页上的所有标签 回到首页
this.$store.dispatch('delAllViews')
}
let onlykey = ''
let clicked = ''
if(!this.$route.meta.clicked){
onlykey = this.$route.path +"0"
clicked = '0'
}
else{
//上一次的状态为0
if(this.$route.meta.clicked=='0'){
//这一次有参数
if(Object.keys(this.$route.query).length!=0 || this.$route.hash=='#new'){
onlykey = this.$route.path +"1"
clicked = '1'
}
//这一次无参
else{
onlykey = this.$route.path +"0"
clicked = '0'
}
}
//上一次的状态不是0
else{
//这一次有参数
//在创建新活动时 传入 hash = new
if(Object.keys(this.$route.query).length!=0 || this.$route.hash=='#new'){
//这一次的状态 为上一次+1
//获取上一次的状态
clicked = (parseInt(this.$route.meta.clicked)+1).toString();
onlykey = this.$route.path +clicked }
//这一次无参 这一次状态不变
else{
clicked = parseInt(this.$route.meta.clicked).toString();
onlykey = this.$route.path +clicked; }
}
}
this.$route.meta.clicked = clicked;
return onlykey
}
}, }
</script>

  代码仅供参考  (业务比较复杂 写了一大推逻辑)!

Vue 路由缓存的更多相关文章

  1. vue 路由缓存 路由嵌套 路由守卫 监听物理返回

    最近开发vue项目,遇到的一些问题,这里整合一下,看到一些博客已经有写相关知识,然后自己再次记录一下. 这是关于vue路由相关比较常见的问题,以后遇到相关路由的问题,会不断更新这篇博客. 需求1:从填 ...

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

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

  3. vue路由知识整理

    vue路由知识整理 对于单页应用,官方提供了vue-router进行路由跳转的处理.我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(compo ...

  4. Vue路由(vue-router)

    一.介绍 1.vue-router安装 官方文档:https://router.vuejs.org/zh/installation.html下载地址:https://unpkg.com/vue-rou ...

  5. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  6. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  7. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

  8. VUE路由新页面打开的方法总结

    平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...

  9. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

随机推荐

  1. [QT]QPixmap图片缩放和QLabel 的图片自适应效果对比

    图片大小为600x600 效果图: ui->label->setScaledContents(true);                                         ...

  2. ajax向后台请求数据,后台接收到数据并进行了处理,但前台就是调用error方法

    如果你的前台页面书写正确的情况下,并且运行情况和本文题目类似,那不妨试试这个: 在ajax方法中加上:async:false,让ajax同步执行. 因为ajax默认是异步的,至于为什么会不执行succ ...

  3. C#中系统时间和UNIX时间戳互相转换

    在项目开发过程中,有时会遇到不同程序之间相互调用数据,数据中不免会包含时间,比如ASP.NET调用PHP,牵扯到时间就要做一下处理,PHP程序中一般存取的都是UNIX时间,不像ASP.NET存储的是年 ...

  4. C#在64位操作系统上连接Oracle的问题和解决方案

    C#使用System.Data.OracleClient连接Oracle数据库.之前在WinXP上正常运行的程序移植到Windows 2008 x64上之后就连不上数据库了.错误信息如下: 尝试加载O ...

  5. 什么是Spark(四)运算过程中的黑科技

    Spark在运算过程中提供了一套完整的机制用来提高效率. 1. 用于收集信息的Accumulator,自带增量,用于spark全局收集数据:共享数据: 2. 用于提高传输速率的broadcast机制: ...

  6. hive 处理小文件,减少map数

    1.hive.merge.mapfiles,True时会合并map输出.2.hive.merge.mapredfiles,True时会合并reduce输出.3.hive.merge.size.per. ...

  7. Spring 部署Tomcat 404 错误解决方案

    将Spring项目部署到tomcat后,访问网页出现404错误 HTTP Status 404 – Not Found The origin server did not find a current ...

  8. IE8 focus 失效解决方案

    这几天遇到两个在IE8下focus失效的非常奇怪的问题,当然这个是指JS函数: document.getElementById("id").focus(); 或者 $(" ...

  9. bin sh git@github.com no such file or directory

    window下使用git: 输入命令:git clone git @github.com:Alan0521/dotvim.git 出现/bin/sh:git@github.com no such fi ...

  10. beautifulsoup 基本语法

    案例一: #coding=utf-8import jsonimport requestsfrom bs4 import BeautifulSoupurl = 'http://www.itest.inf ...