Vue-Router

Vue-Router

by budiadiono

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://rawgit.com/vuejs/vue-router/dev/dist/vue-router.min.js"></script>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <a v-link="{ path: '/foo/bar' }">Start</a>
  </p>
  <router-view></router-view>
</div>

JavaScript

var App = Vue.extend({})
var router = new VueRouter({
	linkActiveClass: 'active',
	hashbang: false,
	history: false,
	root: '/'
})


var Foo = Vue.extend({
  template: '<router-view></router-view>'
})

var Bar = Vue.extend({
  template: '<div><form id="form"><input v-model="foo"/><input v-model="meh"/><button type="submit">submit</button></form></div>',
  data: function() {
    return {
      foo: 'Fooo....',
      meh: 'Meh'
    }
  },
  ready: function() {
    $('#form').submit(function(e) {
      e.preventDefault();

      setTimeout(function() {
        router.go('/meh');
      }, 100);
    })
  }
})
var Meh = Vue.extend({
  template: '<p>This is meh!</p>'
})

router.map({
  '/foo': {
    component: Foo,
    subRoutes: {
      '/bar': {
        component: Bar
      }      
    }    
  },
  '/meh': {
        component: Meh
      }
})

router.beforeEach(function(transition) {

  setTimeout(function() {
   // if (transition.to.path == '/foo/bar') {
   //   transition.redirect('/foo/meh')
   // } else {
   //   transition.next();
   // }
    transition.next();
  }, 100);
});


router.start(App, '#app')