JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue.router/2.0.1/vue-router.min.js"></script>
  <div id="app">
    <router-link to="/top">トップページ</router-link>
    <router-link to="/users?redirect=true">ユーザー一覧ページ</router-link>
    <router-view></router-view>
  </div>
  <script type="x-template" id="user-list">
  <div>
    <div v-if="error" class="error">
      {{ error }}
    </div>
    <div v-for="user in users" :key="user.id">
      <h2>{{ user.name }}</h2>
    </div>
  </div>
</script>

JavaScript

// 擬似的にAPI経由で情報を取得したようにする
var getUsers = function (callback) {
  setTimeout(function () {
    callback(null, [
      {
        id: '001',
        name: 'Takuya Tejima'
      },
      {
        id: '002',
        name: 'Yohei Noda'
      }
    ])
  }, 2000)
}


var UserList = {
  template: '#user-list',

  data: function () {
    return {
  
      users: function () { return [] },
      error: null
    }
  },

  beforeRouteEnter: function (to, from, next) {
    getUsers((function (err, users) {
      if (err) {
        this.error = err.toString()
      } else {
        // nextに渡すcallbackでコンポーネントにアクセスすることができます
        next(function (vm) {
          vm.users = users
        })
      }
    }).bind(this))
  }
}

  // ルートオプションを渡してルーターインスタンスを生成します
  var router = new VueRouter({
    // 各ルートにコンポーネントをマッピングします
    // コンポーネントはVue.extend() によって作られたコンポーネントコンストラクタでも
    // コンポーネントオプションのオブジェクトでも構いません
    routes: [
      {
        path: '/top',
        component: {
          template: '<div>トップページです。</div>'
        }
      },
      {
        path: '/users',
        component: UserList
      }
    ]
  })
  

  // ルーターのインスタンスをrootとなるVueインスタンスに渡します
  var app = new Vue({
    router: router
  }).$mount('#app')