Vue-- 监听路由变化,数据无法更新?

2020-01-07 10:09:34

除了动态修改 $route.meta.keepAlive

还有给router-view 加key的用法,

根据自己的需求酌情处理吧

参考地址 Vue-- 监听路由变化,数据无法更新?

之前写的Vue项目,有个问题困扰了好久。新闻板块有推荐、精华、最新等几个Tab,设想通过切换Tab,改变路由参数(get/news/:tab)去获取对应数据,然后渲染到页面(用的是同一套组件),问题来了:当切换Tab时,数据并没有更新,后来看了Vue-router官网,有这么一句话:提醒一下,当使用路由参数时,例如从 /user/foo 导航到 user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。 意思很明显了:虽然路由参数发生了变化,但组件还是那个组件,Vue生命周期也还没结束,此时并不会刷新数据。(个人认为,开发spa页面,一切都是以路由为起点的,路由变化,页面跟着变化,复用组件竟然会影响到路由,很难受!!)

不过,官网也提出了相应的解决方案:复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象:

  

复制代码

const User = {
  template: '...',
  watch: {    '$route' (to, from) {      // 对路由变化作出响应...    }
  }
}

复制代码

  今天,在逛社区的时候,又遇到这个‘’拦路虎‘’以及一个非常新颖的解决方案,相信不少人在看Vue官方文档的时候,对这句话有过疑问:用 :key管理可复用的元素(这句话出自条件渲染 v-if部分),如何管理,官网也给了演示(我第一次看的时候,好像是没有的例子的) 这个例子让我对v-if又有了不同的看法:以前认为v-if是动态的生成/去除元素,仔细看例子,会发现:模板相同,会造成一种“复用”的感觉(v-if和v-else的模板是一样一样的),也就是说,数据更新之前,会先比较模板先后的异同,再决定是否跟新数据,并不是先更新数据,再刷新模板。 对:key的详细解读来自知乎:https://www.zhihu.com/question/61064119  

  上面的思考题其实跟我遇到的问题是一致的,自己进入了一个误区:Vue是数据驱动的,这句话是绝对没有问题的,但他不是‘金科玉律’,vue的底层实现应该是:通过比较模板先后的异同,再决定是否跟新数据(个人拙见,轻喷)。

  回到正题,:key是用来阻止“复用”的。  Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可(Vue文档原话)

  那么,给<router-view></router-view>添加一个key,能不能解决这个问题呢?答案是可以的(废话-_-||) 可以这样来:

  

复制代码

<router-view :key="key"></router-view>computed: {
    key() {        return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
    }
 }

复制代码

  使用computed属性和Date()可以保证每一次的key都是不同的,这样就可以如愿刷新数据了。


  • 2018-12-16 12:12:12

    android:windowSoftInputMode属性具体解释

    android:windowSoftInputMode属性一共同拥有9个取值。各自是: stateUnspecified,stateUnchanged。stateHidden,stateAlwaysHidden。stateVisible,stateAlwaysVisible,adjustUnspecified,adjustResize。adjustPan。

  • 2018-12-16 18:14:23

    Android在代码中设置状态栏半透明/全透明

    顶部是有文字,小图标等,如果直接用透明半透明 状态栏上的东西会与内容重叠(你觉得无所谓也可以直接用上面2部分代码),这样我们就想做成类似支付宝这样的效果:

  • 2018-12-18 15:33:01

    <![CDATA[]]>和转义字符

      此标记用于xml文档中,我们先来看看使用转义符的情况。我们知道,在xml中,”<”、”>”、”&”等字符是不能直接存入的,否则xml语法检查时会报错,如果想在xml中使用这些符号,必须将其转义为实体,如”&lt;”、”&gt;”、”&amp;”,这样才能保存进xml文档。

  • 2018-12-26 15:06:00

    PHP-FPM运行状态的实时查看及监控详解

    php-fpm和nginx一样内建了一个状态页,对于想了解php-fpm的状态以及监控php-fpm非常有帮助。这篇文章就给大家详细介绍了PHP-FPM运行状态的实时查看及监控,有需要的朋友们可以参考学习,感兴趣的朋友们下面来一起看看吧。

  • 2018-12-26 16:12:56

    nginx+php-fpm模式php内存泄漏探究

    这里要重点说一下第三步骤。第三步涉及到php-fpm进程生命周期的东西。一个php-fpm的生命周期大致是这样的:模块初始化(MINIT)-> 模块激活(RINIT)-> 请求处理 -> 模块停用(RSHUTDOWN) -> 模块激活(RINIT)-> 请求处理 -> 模块停用(RSHUTDOWN)……. 模块激活(RINIT)-> 请求处理 -> 模块停用(RSHUTDOWN)-> 模块关闭(MSHUTDOWN)。在一个php-fpm进程的生命周期里,会有多次的模块激活(RINIT)-> 请求处理 -> 模块停用(RSHUTDOWN)的过程。这个“请求处理”的大致过程是这样的:php读取相应的php文件,对其进行词法分析,生成opcode,zend虚拟机执行opcode。