寝て起きて寝て

プログラミングが出来ない情報系のブログ

Vue Routerのメモ

※ここに書かれているのはVueの新規プロジェクトの作成から立ち上げまで
で作成した後のファイル構成を前提にして書いています。

Vue Routerとは

シングルページアプリケーションを構築してくれる。

下記は公式に書かれてたこと

  • ネストされたルート/ビューマッピング
  • モジュール式、コンポーネントベースのルータ構造
  • ルートパラメータ、クエリ、ワイルドカード
  • Vue.js の transition 機能による、transition エフェクトの表示
  • 細かいナビゲーションコントロール
  • 自動で付与される active CSS クラス
  • HTML5 history モードまたは hash モードと IE9 の互換性
  • カスタマイズ可能なスクロール動作

Vue Routerを追ってみる

どこで宣言されているか?

src/main.jsでimportされ、ローカルで登録されている

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

Vue.config.productionTip = false

new Vue({
  router,
//上のrouterを省略しないで書くと router:router, となる
  store,
  render: h => h(App)
}).$mount('#app')

./router/index.jsでは何をやっているか

mport Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

上記がmain.jsの中身。
まず先頭で、Vue本体とRouter本体をインポートしている
その後Vue.use(Router)でRouterのプラグインを有効化している

const routes内で記載されているものは、
各ページへのルートと、表示するコンポーネントの設定が記載されている。
新たにページを増やしたい場合はここに記載すればOK
中身については下記
* path そのページにアクセスした際のURLパスを設定できる。

24行目のmodeを変更するとハッシュで動かせるようになる。
詳しくはここを参照

25行目のbaseでは、アプリケーションのベースURLが設定されている。
ここに'/app/'など設定すると'/app/'からURLが始まるように定義される。
デフォルトは"/"
詳しくはここを参照

router-viewとrouter-link

公式ではここに記載されている

src/App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

router-viewとrouter-linkは先程のrouter/index.jsで設定されたものがimportされて
から初めて使えるようになる。

router-view

この記載をした場所にルートに合わせたテンプレートが表示される。
なのですべてのページに共通するもの(レイアウトとか)に関しては、router-viewの外側で設定する。

to属性に指定したリンク先へ遷移できる。
また./router/index.jsnameを設定している場合には下記のようにも書ける。

      <router-link :to="{ name: 'home' }">Home</router-link> |
      <router-link :to="{ name: 'about' }">About</router-link>

:toになっているのに注意
この書き方だと、ルーターでパスを変更した場合でも各ルーターリンクの記述は
変更しなくても良くなる。
なのでこの書き方で書いたほうが良さそう。