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 v-on="transitions" mode="out-in">
    <router-view @test="test" :key="$route.fullPath"></router-view>
  </transition>
</div>

Babel + JSX

const Foo = {
	template: '<div v-text="`${$route.params.slug}`"></div>',
  beforeRouteEnter(to, from, next) {
  	console.log('beforeRouteEnter', to, from);
    next(vm => {
    	console.log('beforeRouteEnter callbackStart', to, from);
      vm.$emit('test', 'trigger from BeforeRouteEnter callbackStart');
    	// Fake Wait 3 seconds
    	setTimeout(() => {
      	console.log('beforeRouteEnter callbackEnd', to, from);
      }, 3000);
    });
  },
  mounted() {
  	setTimeout(() => {
    	
    })
  },
  beforeRouteUpdate(to, from, next) {
  	console.log('beforeRouteUpdate', to, from);
    // Fake Wait 3 seconds
    	setTimeout(() => {
      	console.log('beforeRouteUpdate callbackEnd', to, from);
        next();
      }, 3000);
  },
  beforeRouteLeave(to, from, next) {
  	console.log('beforeRouteLeave', to, from);
    next();
  },
  methods: {
  	test() {
    	console.log("this is the wrong test");
    }
  },
  watch: {
  	$route(to, from) {
    	console.log('$route watch', to, from);
    },
  }
};

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

router.beforeEach((to, from, next) => {
	console.log('beforeEach', to, from);
  next();
});
router.beforeResolve((to, from, next) => {
	console.log('beforeResolve', to, from);
	next();
});
router.afterEach((to, from) => {
  console.log('afterEach', to, from);
});

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