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都是不同的,这样就可以如愿刷新数据了。


  • 2019-12-03 15:50:00

    html5 audio stop功能

    html5并没有提供停止功能,我们需要通过其他方式来实现这个问题,下面我们来看下神仙般的操作。

  • 2019-12-03 16:33:49

    hapi,nuxtjs跨域请求

    简单请求 与 预检请求,Fetch 与 CORS 的一个有趣的特性是,可以基于 HTTP cookies 和 HTTP 认证信息发送身份凭证。一般而言,对于跨域 XMLHttpRequest 或 Fetch 请求,浏览器不会发送身份凭证信息。如果要发送凭证信息,需要设置 XMLHttpRequest 的某个特殊标志位。

  • 2019-12-03 16:36:03

    跨域资源共享 CORS 详解

    阮一峰大哥的文章写的不错,推荐,也推荐他的整个王章,大家可以去看一下啊。

  • 2019-12-03 16:37:01

    去除options,减少options的访问

    因为跨域请求,浏览器可能(后面讲)会发送一次options请求,如果处理不好,跨域还是会gg的。 之前很少涉及跨域,涉及也是简单请求(下面阮老师文章中区别热简单请求和复杂请求),所以基本不会很少关注options。后面就遇到坑了,下面讲讲注意点。