当多个路由复用同一个模板，此时在这几个路由间切换，模板并不会重新挂载。针对这个情况，我们需要在当前逻辑内对路由做监听，在发生变化时更新对应属性，已满足需求。

　　但是，在实现的过程中会遇到如下情况：

　

如图示，在页面切换的时候转入el-table的prop属性已经发生了变化，但是内循环绑定的并没有变化，原因是vue监听不到深层次的对象属性或者数组值的改变。

　　解决办法就是在路由切换的时候，利用v-if指令绑定状态的过度。此处假设v-if="view === 'main'"代表显示，在切换的过程将view置为'loading', 然后延时更新置为'main',　这样列表展示会经历 "显示=>消失=>显示"的过程，列表组件会经历" 挂载 =>销毁=>挂载"的过程，使组件释放缓存数据强制更新，这样就符合了我们之前多页面复用模板灵活配置属性的设计。

　　此处记录了我之前大概的解决思路，希望对各位有帮助。这个问题更多的考察我们对组件生命周期和属性双向绑定机制的一些理解。如有更多的想法、讨论，请留言给我。谢谢

vue: 关于多路由公用模板，导致组件内数组缓存问题的更多相关文章

  1. vue刷新当前路由：router-view 复用组件时不刷新的3种解决方案总结

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应 ...

  2. Vue中router路由异步加载组件-优化性能

    何时使用异步加载组件 当首页app.js文件太大时,可以拆分组件异步加载,如果app.js文件很小时,不建议使用异步加载组件,因为异步加载组件时每次都要发送一个HTTP请求,这样的代价远比首页一次性加 ...

  3. Vue(基础八)_导航守卫（组件内的守卫）

    一.前言 主要通过一个例子演示三个钩子的作用: 1.beforeRouteEnter()                                                         ...

  4. vue常用的路由对象

    官网上解释:一个路由对象表示当前激活的路由的状态信息 路由对象,在组件内即this.$route,存着一些与路由相关的信息,当路由切换时,路由对象会被更新 //如果要在刷新页面时候通过路由的信息来操作 ...

  5. Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  6. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

  7. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  8. vue教程3-01 路由、组件、bower包管理器使用

    vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...

  9. 解决vue组件内前置路由守卫beforeRouteEnter无法获取上下文this

    问题描述 vue框架,只有在报名页面报名成功,然后自动跳转到订单详情,才弹出一个引流弹窗,其他情况均不弹出,我就想到使用vue 的组件内前置守卫beforeRouteEnter来实现.beforeRo ...

随机推荐

  1. Eclipse "Could not create java virtual machine"的问题解决

    今天到了新的环境,需要重新搭建Android的开发环境,下载eclipse并安装了JDK1.6后,启动eclipse,发现出现了错误“Could not create Javavirtual mach ...

  2. 9.5 Binder系统_驱动情景分析_transaction_stack机制

    参考文章:http://www.cnblogs.com/samchen2009/p/3316001.html test_server服务进程可能有多个线程,而在发送数据的时候handle只表示了那个进 ...

  3. Learn from Architects of Buildings

     Learn from Architects of Buildings Keith Braithwaite Architecture is a social act and the material ...

  4. 辛星笔记之高质量JavaScript代码书写要点

    首先本文章是http://www.zhangxinxu.com/wordpress/?p=1173 的读书笔记,读者能够自己到鑫旭的空间去阅读原文.这里我对其进行了简化. 可维护的代码的一些要求: ( ...

  5. POJ 3132 & ZOJ 2822 Sum of Different Primes(dp)

    题目链接: POJ:id=3132">http://poj.org/problem?id=3132 ZOJ:http://acm.zju.edu.cn/onlinejudge/show ...

  6. Opencv分水岭算法——watershed自动图像分割用法

    分水岭算法是一种图像区域分割法,在分割的过程中,它会把跟临近像素间的相似性作为重要的参考依据,从而将在空间位置上相近并且灰度值相近的像素点互相连接起来构成一个封闭的轮廓,封闭性是分水岭算法的一个重要特 ...

  7. SpringMVC上传图片总结（1）---常规方法进行图片上传，使用了MultipartFile、MultipartHttpServletRequest

    原文地址:https://blog.csdn.net/chenchunlin526/article/details/70945877 SpringMVC上传图片总结(1)---常规方法进行图片上传,使 ...

  8. Perl读写Excel简单操作

    Perl读写Excel简单操作 使用模块 Spreadsheet::ParseExcel Spreadsheet::WriteExcel 读Excel #!/usr/bin/perl -w use s ...

  9. 【源代码】Timer和TimerTask源代码剖析

    Timer是java.util包中的一个工具类,提供了定时器的功能. 我们能够构造一个Timer对象,然后调用其schedule方法在某个特定的时间或者若干延时之后去运行一个特定的任务.甚至你能够让其 ...

  10. php实现二叉树的镜像（二叉树就是递归）

    php实现二叉树的镜像(二叉树就是递归) 一.总结 二叉树就是递归 二.php实现二叉树的镜像 题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 输入描述: 二叉树的镜像定义:源二叉树 8 / ...