【Vue.js】vue-routerでルーティング

今回はvue.jsのルーティングについて。

vue.jsを使う目的は様々だと思いますが、その一つにSPAがあると思う。
そのSPA化にあたって必要なのがvue-routerという機能です。

ぶっちゃけ簡単に言えばこれさえ使えばSPAになります。
vueは基本的にコンポーネントを最初に全て読み込むので、あとはそのコンポーネントをどう表示するかだけです。

やり方は簡単。ルートコンポーネントのApp.vueに

</router-link>

と書くだけ。これでルーティングされた通りのコンポーネントが表示されます。
次に、vue-routerをインポートしたjsファイルでルーティングの設定をします。

import Router from 'vue-router'
import hogehoge from '@/components/hogehoge'
import hoge from '@/components/hoge'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: hogehoge,
      children: [
        {
          path: '',
          component: hoge
        }
  ]
})

vue-routerの他に、使用するコンポーネントもインポートしておきます。
あとは入れ子構造のように、常に表示させるコンポーネントをroutes直下に。表示切り替えを行うコンポーネントをchildrenに定義しておきます。
あとはpathでどのURLがどのコンポーネントに対応するかを書いておきましょう。
これで大丈夫ですが、デフォルトだと移動するとURLに＃がついてしまいます。
見た目的に・・・っていうときはmodeをhistoryにしておくこと。
設定は以上です。

あとはリンク先のディレクティブを

<router-link to="/hoge">hoge</router-link>

としておきましょう。クリックすればそのコンポーネントを呼び出す事が出来るはずです。

まとめ

以上がvue-routerの使い方でした。
少ないうちはこれで追加していけば問題ないですが、数が増えてくると管理が面倒になってくると思います。
そのときはNuxt.jsを使うと幸せになりそう。