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-08-02 15:03:28

    正则提取字段

    如下文案,如何提取中间的文案呢 eq: 我们的%%aaa%%不一致,哈哈哈 提取后是aaa

  • 2018-08-07 20:00:42

    xUtils3.0版本的发送同步网络请求的方式

    对于Android开发来说,基本都是用异步来从网络上请求数据,很少用到同步请求的。近日项目有个地方需要使用到同步请求(以我目前的知识储备来说好像只能用同步请求来解决这个问题了),去网上搜索相关资料,又没有找到什么明确的使用方法。所以记下来,以备不时之需。

  • 2018-08-14 23:35:28

    Retrofit 设置 超时时间

    今天开发的时候遇到一个网络请求超时的问题,后台处理是成功的,但是移动端返回的总是提示请求超时,在设置了retrofit请求超时的时间延长以后,就可以请求成功了,下面是配置的方法: