问题 在路由切换时不需要每次 点击都刷新子路由   尤其是在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. 查看nvidia显卡命令

    http://blog.csdn.net/luo123n/article/details/50296973 nvidia-smi

  2. 文本框模糊匹配(纯html+jquery简单实现)

    一.项目中需要用到此功能,使用过EasyUI中的Combobox,网上也搜过相应的解决办法,对于我的项目来说都不太合适,因为我还是喜欢比较纯粹的东西,就自己动手写了一个,比较简单,但还算能用,我的项目 ...

  3. 6-11 Level-order Traversal(25 分)

    Write a routine to list out the nodes of a binary tree in "level-order". List the root, th ...

  4. 1106 1014 C语言文法定义与C程序的推导过程 冒泡程序语法树

  5. 【转载】python安装numpy和pandas

    转载:原文地址 http://www.cnblogs.com/lxmhhy/p/6029465.html 最近要对一系列数据做同比比较,需要用到numpy和pandas来计算,不过使用python安装 ...

  6. Leetcode Excel Sheet Column Number (C++) && Excel Sheet Column Title ( Python)

    Given a column title as appear in an Excel sheet, return its corresponding column number. For exampl ...

  7. 在Windows Server 2012启用或关闭Internet Explorer增强的安全配置

    在 Windows Sever 2012 中打开 IE 浏览器时,IE10 会出现[已启用 Internet Explorer 增强的安全配置]的提示信息. 在安全性等级中会设置以[高安全性],如果我 ...

  8. 智能家居入门DIY——【三、GP2Y10之颗粒物传感器】

    这个传感器接线算比较简单的,程序也不麻烦.不过这东西是颗粒物传感器吧,不是神马PM2.5(总悬浮颗粒物),不是神马PM10(可吸入颗粒物).插个螺丝刀进去度数也是变的,不是说的很清楚原理是反光嘛……… ...

  9. Eclipse下使用PySpark报Could not find valid SPARK_HOME while searching

    主要是Eclipse下需要多一步配置,就是需要加上SPARK_HOME的系统变量. 首先,在Windows的环境变量中加入SPARK_HOME 然后,在Eclipse的配置中加入这个环境变量: Win ...

  10. Train-Alypay-Cloud:分布式微服务中间件sofa 开发培训(第二次)

    ylbtech-Train-Alypay-Cloud:分布式微服务中间件sofa 开发培训(第二次) 1.返回顶部 1. 这是本次培训的内容,望各位提前配好环境.工具.2.6-2.7 我们在环球金融8 ...