复用组件时如何触发转换？

Question

同一个组件之间的转场如何触发转场？

（对于 vue-router 1，有一个 canReuse 钩子。它在 vue-router 2 中不再存在。）

const Index = {
  template: `<div id="app">
    <router-link :to="{ path: '1' }">page 1</router-link> | 
    <router-link :to="{ path: '2' }">page 2</router-link>
    <router-view></router-view>
  </div>`
};

const Page = {
  template: `<transition @enter="transitionEnter" @leave="transitionLeave">
    <div>
      <p>page {{ id }}</p>
    </div>
  </transition>`,
  data() {
    return {
      id: this.$route.params.id,
    }
  },
  methods: {
    transitionEnter(el, done) {
      console.log('transitionEnter');
      done();
    },
    transitionLeave(el, done) {
      console.log('transitionLeave');
      done();
    },
    fetchData() {
      this.id = this.$route.params.id;
    }
  },
  watch: {
    '$route': 'fetchData'
  },
};

const App = Vue.extend(Index);

const router = new VueRouter({
  routes: [{
    path: '/:id',
    component: Page
  }, {
    path: '*',
    redirect: '/1'
  }]
})

const app = new App({ router }).$mount('#app');

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>

Answer 1

在 router-view 上使用 key 参数。

const Index = {
  template: `<div id="app">
    <p>app</p>
    <router-link :to="{ path: '1' }">page 1</router-link> | 
    <router-link :to="{ path: '2' }">page 2</router-link>
    <router-view :key="'a' + $route.params.id"></router-view>
  </div>`
};

const Page = {
  template: `<transition @enter="transitionEnter" @leave="transitionLeave">
    <div>
      <p>page {{ id }}</p>
    </div>
  </transition>`,
  data() {
    return {
      id: this.$route.params.id,
    }
  },
  methods: {
    transitionEnter(el, done) {
      console.log('transitionEnter');
      done();
    },
    transitionLeave(el, done) {
      console.log('transitionLeave');
      done();
    },
  },
};

const App = Vue.extend(Index);

const router = new VueRouter({
  routes: [{
    path: '/:id',
    component: Page
  }, {
    path: '*',
    redirect: '/1'
  }]
})

const app = new App({ router }).$mount('#app');

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>

复用组件时如何触发转换？

How to trigger a transition when a component is reused?

vue.js

vuejs2

vue-router