Vue Routerのメモ
※ここに書かれているのはVueの新規プロジェクトの作成から立ち上げまで
で作成した後のファイル構成を前提にして書いています。
Vue Routerとは
シングルページアプリケーションを構築してくれる。
下記は公式に書かれてたこと
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パスを設定できる。
name ここで指定した名前によって
<router-view>
や<router-link>
でnameを使って表示や、
遷移先を指定することができる。component そのパスで実際に表示するコンポーネントを指定する。
コンポーネント自体を設定する事ができるが、
必要なコンポーネントをすべて記載すると初期描画が遅くなる。
これを解決するために
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
のように関数で記載する。
このように記述すると、そのルートが表示されるタイミングで、コンポーネントが読み込まれる。
/* webpackChunkName: "about"
この部分はただのコメントではなくwebpackに関連する設定の意味がある。
webpackChunkName
にnameを指定することで、バンドル後のコンポーネントのファイルを分けることができる。
これによってjs/about.js
という名前のjsファイルができる。
このことを記載している箇所は公式では(遅延ローディングルート)https://router.vuejs.org/ja/guide/advanced/lazy-loading.html#%E5%90%8C%E3%81%98%E3%83%81%E3%83%A3%E3%83%B3%E3%82%AF%E5%86%85%E3%81%A7%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E5%8C%96の箇所に記載がある。
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
の外側で設定する。
router-link
to
属性に指定したリンク先へ遷移できる。
また./router/index.js
でname
を設定している場合には下記のようにも書ける。
<router-link :to="{ name: 'home' }">Home</router-link> | <router-link :to="{ name: 'about' }">About</router-link>
:to
になっているのに注意
この書き方だと、ルーターでパスを変更した場合でも各ルーターリンクの記述は
変更しなくても良くなる。
なのでこの書き方で書いたほうが良さそう。