vue路由跳转的时候，组件的值不更新的问题

1.背景

最近在写项目时，复用组件时产生了一个问题：使用同一组件的两个路由页面在跳转的过程中，url改变了，但是视图不进行刷新。
具体：我想从别的用户的快捷周报进入我自己的快捷周报页面时，router-view复用的组件内容不进行刷新。

2.解决办法

1. 给router-view设置key值，不同的key值可以表明它们不是同一个组件，这样组件的内容就会进行更新。为了让key值不同，我们可以使用当前时间的时间戳作为key。

      <router-view id="contain" :key="new Date().getTime()"></router-view>

缺点：如果router-view存在嵌套路由，点击子路由会造成组件刷新，且子路由不会携带参数，就会出现获取不到初始化数据的情况。
2. 使用watch检测路由，当发现路由改变，重新初始化

watch:{
	$router:"getInfo"
}，
methods:{
	getInfo(){}
}

但是这里有一个问题，就是watch检测到路由改变之后，组件不会刷新，只是调用watch中重新获取一下数据，所以一些页面创建时进行的一些初始化的操作最好封装成一个函数里面，在路由更新的时候重新调用。

3. 导航守卫（官方推荐）
   在检测到路由即将离开的时候，把数据全改完，再离开。

beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },