Vue router transition

by ChangJoo Park

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>


<div id="app">
  <router-link :to="{ name: 'home' }">Home</router-link>
  <router-link :to="{ name: 'projects-index' }">Project</router-link>
  <hr>
  <transition name="page" mode="out-in">
    <router-view></router-view>
  </transition>
</div>

<template id="home-page">
  <div>
    HomePage
  </div>
</template>

<template id="projects-page">
  <div>
    
      <router-link :to="{ name: 'projects-index' }">Projects</router-link>
      <router-link :to="{ name: 'projects-setting' }">Setting</router-link>
  
    <hr>
    <transition name="page" mode="out-in">
      <router-view></router-view>
    </transition>      
  </div>
</template>

<template id="projects-index-page">
  <div>
    Project Index
  </div>
</template>

<template id="projects-setting-page">
  <div>
    Project Setting
  </div>  
</template>

CSS

.page-enter-active, .page-leave-active {
  transition: opacity 1s, transform 1s;
}
.page-enter, .page-leave-to {
  opacity: 0;
  transform: translateX(-30%);
}

JavaScript

Vue.use(VueRouter)

const HomePage = Vue.component('home-page',{
	template: '#home-page'
})

const ProjectsRootPage = Vue.component('projects-page',{
	template: '#projects-page'
})

const ProjectsIndexPage = Vue.component('projects-index-page',{
	template: '#projects-index-page'
})
const ProjectsSettingPage = Vue.component('projects-setting-page',{
	template: '#projects-setting-page'
})

const routes = [
	{
  	path: '/',
    name: 'home',
    component: HomePage
  },
  {
  	path: '/projects',
    name: 'projects',
    component: ProjectsRootPage,
    children: [
    	{
      	path: '',
        name: 'projects-index',
        component: ProjectsIndexPage
      },
    	{
      	path: '/setting',
        name: 'projects-setting',
        component: ProjectsSettingPage
      }
    ]
  }
]

const router = new VueRouter ({
	routes
})

new Vue({
	el: '#app',
  router
})