vue-router 2 template

Template for vue-router 2

by khamer

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/home">/home</router-link>
  <router-link to="/foo">/foo</router-link>
  <transition @enter="transitions.enter" @before-enter="transitions.beforeEnter" @after-enter="transitions.afterEnter" @leave="transitions.leave" name="page" mode="out-in">
    <router-view :key="$route.fullPath"></router-view>
  </transition>
</div>

CSS

.page-enter-active,
.page-leave-active {
  transition: opacity 1s ease;
}

.page-enter,
.page-leave-active {
  opacity: 0;
}

Babel + JSX

const Foo = {
	template: `<div><h1 v-text="\`You're on ${$route.params.slug}\`"></h1></div>`,
};

const router = new VueRouter({routes: [{path: '/:slug', component: Foo}]});

new Vue({
	router,
  el: '#app',
  data: {
    transitions: {
      enter(el, done) {
      	console.log('@enter');
        done();
      },
      leave(el, done) {
      	console.log('@leave');
        done();
      },
    },
  },
  methods: {
  	test() {
    	console.log('test');
    }
  }
})