Vue js SPAとRouterについて

この記事は前回の記事の続きです。

kirikko-scondcube.hatenablog.com

SPAの特徴

SPAはページの描画は一度（初回アクセスが重くなることがある）。

軽快に動作するアプリケーションが作れる。

Vue Routerの機能

ページごとの画面の切り替えをする機能

確認するにはsrc/main.js

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,と同じ意味上は省略の記載方法

store,

render: h => h(App)

}).$mount('#app')

import App from './App.vue'で読み込んで

new Vueの中のrouter,で定義している。

これによってVueインスタンスの初期化時にrouterが渡される。

 

次にsrc/router/index.jsをみてみる

 

index.js

import Vue from 'vue'//vue本体の読み込み

import VueRouter from 'vue-router'//vue Routerのライブラリの読み込み

import Home from '../views/Home.vue'

Vue.use(VueRouter)//useメソッドにルーターを渡して有効にしている

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',//mode: 各画面のパスの設定「history」ではパスを「/」で区切る一般的なやり方を指定している(他にhash, abstractなどがある。)

base: process.env.BASE_URL,//base: アプリケーションのベースとなるパスを指定するもの

routes

})

export default router

routesの解説

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')

}

]

ルーツでは配列の中で各ページごとの記載をしている。

扱いたいページが増やしたい時はこの配列の中に新しいページの記述を増やしていく。

書くページの記述はオブジェクトで指定している。

{

path: '/',

name: 'Home',

component: Home

},

path: そのページを表示するパス

→'/'はホーム画面（デフォルトで最初に表示されるパス）

name: 名前付きルートのこと（ルーターリンクコンポーネントで使用）

→ルートにネームを指定しておくことで名前でリンクに飛べるようになる（詳細は以下記事ルーターリンクコンポーネントにて）

kirikko-scondcube.hatenablog.com

component:実際に表示するコンポーネントを記述

コンポーネントの読み込み方法は２つ

①同一ファイル内にimportされたファイルを指定する方法

今回の例ではHomeコンポーネントは事前にインポートされている。

component: Homeとなっていることがわかる↓

import Vue from 'vue'//vue本体の読み込み

import VueRouter from 'vue-router'//vue Routerのライブラリの読み込み

import Home from '../views/Home.vue'

Vue.use(VueRouter)//useメソッドにルーターを渡して有効にしている

const routes = [//ここでルートの操作をする処理を記載。各ページに関するルートとそのルートで表示するコンポーネントの設定を書く

{

path: '/',

name: 'Home',

component: Home

},

コードを見ると上で

import Home from '../views/Home.vue'

を定義しているのがわかる。

これをcomponent:Homeで指定している。

メリット

小規模プロジェクトであれば管理しやすい。

デメリット

大規模開発で多数のコンポーネントの読み込みが必要な場合、importするファイルが多くなり、最初の読み込みに時間がかかる

②必要な物を取ってくる方法（関数でコンポーネントを取ってくる方法）

この方法だと最初にimportをする必要がなくなるため、軽快に使用可能（しかし記述がわかりづらい）

今回の例だとaboutのインポートで使われている

{

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')

}

component部分の記述がHomeと違うことがわかる↓

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

 

ここの記述では関数の戻り値でコンポーネントの場所を返すことができるため、そのページが読み込まれたタイミングで初めてインポートされるため複数コンポーネントの読み込みが一度に起こらず軽快な操作を実現できる。

＊コメント部分「* webpackChunkName: "about" */」にも意味があるがそこは割愛。

udemyのセクション40でも解説がある。

基本的に軽い記述であれば①を使えば良さそう