Vue中多个路由共享一个组件，如何避免组件被缓存？

Question

这是我的Route, A和B公用组件Common。

let routes = [
  {
    path: '/A',
    name: 'A',
    component: Common,
  },
  {
    path: '/B',
    name: 'B',
    component: Common,
  }
];

Common组件的代码如下。我点击了几次button后，跳转到B，transition不生效，而且显示的是更改过的number值。如何避免缓存让Common组件重新渲染？

<template> 
     <div>
         <button @click="click"> Click Me!</button>
         <br>
         The value of number is: {{number}}
         <br>
         <button @click="next">Click Me to navigate to next route!</button> 
     </div>
</template>

<script>
// @ is an alias to /src
import _ from 'lodash';
export default {
  name: 'Common',
   data: function() {
    return {
        number: 1
    }
  },
  methods: {
     click: function() {
         this.number++;
     },
     next: function() {
         this.$router.push({path: 'B'});
     }
  },
  mounted: function() {
    console.log('enter mounted');
  },
  destroyed: function() {
      console.log('destroyed');
  }
}
</script>

Update:
我发现可以在Common组件中加入如下方法，这样当从A跳到B的时候，B中的数据就是原始的数据，但目前还有一个问题，transition还是没有起作用，要怎么解决呢。。。

beforeRouteLeave: function(to, from, next) {
      console.log('beforeRouteLeave');
      Object.assign(this.$data, {number: 1});
      next();
}

Answer 1

:key = "handleDate()"

handleDate(){
    return new Date().getTime()
}

Answer 2

给组件加一个key