vue-router 2 template

Template for vue-router 2

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<div id="app">
  <router-link to="/">/root</router-link>
  <router-link to="/foo">/foo</router-link>
  <router-link to="/boo">/boo</router-link>
  <router-view></router-view>
</div>

Babel + JSX

const store = new Vuex.Store({
  state: {
    items: []
  },
  mutations: {
    updateItems(state, payload) {
      state.items = payload
    }
  },
  actions: {
    updateItems({ commit }) {
      return new Promise(resolve => {
        setTimeout(() => {
          commit('updateItems', [...Array(5)].map(() => Math.random() * 1000 | 0));
          resolve();
        }, 2000);
      })
    }
  }
})

const Root = { template: '<div>Root</div>' }
const Foo = { template: '<div>Foo</div>' }
const Boo = {
  template: '<div>Boo<div>{{ JSON.stringify($store.state.items) }}</div></div>',
  beforeRouteEnter(to, from, next) {
    console.log('сейчас будем получать данные...');

    let count = 0;
    const intervalID = setInterval(() => console.log(`...получаем${Array(++count).fill('.').join('')}`), 200);

    store.dispatch('updateItems').then(() => {
      clearInterval(intervalID);
      console.log('...наконец-то получили');
      next();
    });
  }
}

const router = new VueRouter({
  routes: [
    { path: '/', component: Root },
    { path: '/foo', component: Foo },
    { path: '/boo', component: Boo }
  ], 
})

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