Wrapping the whole <router-view> inside a transition tag will perform the same transition for all the components.
If we want a different transition for every component, we have an alternate option: we have to wrap the individual components inside transitions themselves.
Let's say, for example, that we have two transitions: spooky and delicious. We want to apply the first when the Home component appears, and the second when the Menu component appears.
We need to modify our components, as follows:
const Home = { template: ` <transition name="spooky"> <div>Welcome to Ghost's</div> </transition>` }const Menu = { template: ` <transition name="delicious"> <div>Today: insisible cookies!</div> </transition>` }
