VueRouterを使ってみる

##基本
###セットアップ

$ vue create router-vuecli
$ cd router-vuecli
$ npm i vue-router
$ touch src/router.js

src/router.js

import Vue from 'vue'
import Router from 'vue-router'

//vueにプラグインを適用する
Vue.use(Router)

export default new Router({
  routes: [
    //ここにパスを書いていく
  ]
})

src/main.js

import Vue from 'vue'
import App from './App.vue'
+ import router from './router'

Vue.config.productionTip = false

new Vue({
+   router,
  render: h => h(App),
}).$mount('#app')

src/App.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

###ページを作る

$ mkdir src/pages
$ touch src/pages/Home.vue
$ touch src/pages/Users.vue

src/pages/Home.vue

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

src/pages/Users.vue

<template>
  <div>
    <h1>Users</h1>
  </div>
</template>

src/router.js

import Vue from 'vue'
import Router from 'vue-router'
+ import Home from './pages/Home'
+ import Users from './pages/Users'

Vue.use(Router)

export default new Router({
  routes: [
+    { path: '/', component: Home },
+    { path: '/users', component: Users }
  ]
})

##オプション
###URLから#を無くす

src/router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './pages/Home'
import Users from './pages/Users'

Vue.use(Router)

export default new Router({
+  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/users', component: Users }
  ]
})

###リンクで行き来できるようにする
aタグを使うと毎回サーバーにリクエストを投げてしまうので、router-linkを使う

src/App.vue

<template>
  <div>
+    <nav>
+      <router-link to='/'>Home</router-link>
+      <router-link to='/users'>Users</router-link>
+    </nav>
    <router-view></router-view>
  </div>
</template>

###メソッドでページ遷移する
関数を作り、this.$router.pushを使う

src/pages/Home.vue

<template>
  <div>
    <h1>Home</h1>
+    <button @click='toUsers'>Usersのページに移動</button>
  </div>
</template>

+ <script>
+ export default {
+   methods: {
+     toUsers() {
+       this.$router.push({ path: 'users' })
+     }
+   }
+ }
+ </script>

###動的なURLに遷移する
example.com/users/17的なURLに遷移できるようにします

src/router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './pages/Home'
import Users from './pages/Users'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
-    { path: '/users', component: Users }
+    { path: '/users/:id', component: Users }
  ]
})

もちろん:idの部分の文字列を拾って使うことも可能です。$route.params.hogeを使います。

src/pages/Users.vue

<template>
  <div>
    <h1>Users</h1>
+    <p>User NO. {{ $route.params.id }}</p>
  </div>
</template>

##参考

• 超Vue JS 2 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む) | Udemy