Vue页跳转到当前页时不刷新的填坑之旅

缘起

今天产品经理 A童鞋 新加了个 推荐 功能， 需求是在 产品详情页面底部，新建推荐产品的列表，然后点击列表某一条跳转到该条的产品详情页。（推荐产品详情页 和 产品详情页是同一个页面，只是参数不同）

但是在实际开发过程中， 使用 this.$router.push({name: "detail", params}) 时，发现页面的URL 发生了变化，但是页面的内容还是显示之前的内容。

这是神马原因导致的呢？

后来在官网 响应路由参数的变化 中发现这么一段话：

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

原来是组件实例被复用导致的， 那么如何解决呢？

性空

经试验，解决方案有这么两种：

一、watch路由的变化

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

如果发现 to 和 from 的 fullPath 不一致，但是 name 一致时，就表示是当前页面的跳转。 这时候再去执行一便 mounted 或者 created 的事件即可。

二、router-view新增key

如果当前页跳转到当前页的情况比较多， 就不推荐方案一了，需要重写的地方太多。 而且注意 watch 是全局的事件， 只要路由发生变化就会执行一般，这里要慎用。

方案二就是在 router-view 组件新增key属性， 这样当路由发生变化时，就会认为新的组件并没有执行，就会执行新的路由了：

<keep-alive>
      <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath"></router-view>

以上。