Vue-router: [next] canReuse

[stephanedemotte]

Hi !

In the next vue-router, we loose canReuse
I thing it's very usefull for the "same time" transition.

Use case:

If we had { path: 'news/:slug? } and we want a transition between each news page.

For the moment, we can use a dataDelayed object, watch data make a fadeOut, update dataDelayed and fadeIn

<div>{{ dataDelayed }}</div>
...

{
  data() {
    return {
       dataDelayed: null
    }
  },
  created() {
    this.dataDelayed = this.myNewDataFetched
  },
  watch: {
    'myNewDataFetched'() {
       TweenMax.to(this.$el, 1, { alpha: 0, onComplete: () => { 
          this.dataDelayed = this.myNewDataFetched
          this.$nextTick(() => {
            TweenMax.to(this.$el, 1, { alpha: 1})
          })
       }})
    }
  }

But we cannot have a "same time" transition between the 2 pages

Or maybe i'm wrong ? Are there a way to have it ?

Maybe this use case can justify the come back of canReuse ? :)

Thanks !

[fnlctrl]

Please read about 2.0 transition modes: 'in-out', 'out-in', 'simultaneous': https://github.com/vuejs/vue/issues/2873

In addition, data hook and canReuse is deprecated in 2.0 to make our lives easier.

[stephanedemotte]

you close it quickly :/

with { path: 'news/:slug?, component: News }
If the slug change, the transition is never call, only the data is updated.

Sorry for my bad english, but i think you don't understand me.

Thanks

[fnlctrl]

I guess you need this :smile:

<transition>
<router-view :key="$route.params.slug"></router-view>
</transition>

[stephanedemotte]

this is it !
thank you !!