【vue+webpack】単一コンポーネント(.vue)での簡易的なルーティング

状況

クライアントサイドのフレームワークは入門レベル。
現在vue+webpackでチュートリアル以降、自分用アプリを作って練習中。

やったこと

SPAはちょっとまだいいかなと思ってvue-routerは入れなかったんだけど、若干ルーティング的なことがしたくなった。
.vueファイルを使う単一コンポーネントの場合にそのまま使える例がみつからなかったので、自力でできるだけ簡単に実装した。

環境

vue-cliで作成。

vue -V
2.9.6
vue init webpack xxx

内容

フォルダ構成

生成されるファイル群のうちsrcフォルダ内のみ表示。

D:.
│  App.vue
│  main.js
│  simpleRouter.js ←ルーティング情報を持つ
│
├─assets
│      logo.png
│
└─components
        cmpA.vue　←ルーティング先
        cmpB.vue　←ルーティング先
        cmpC.vue　←ルーティング先
        cmpP.vue　←親

動き

押すとふつうに切り替わる感じ。親コンポーネントと呼んではいるものの、移動はページ単位。

初期表示

[cmpAを表示]クリック

[cmpBを表示]クリック

[cmpCを表示]クリック

ソース

ルーター

といっても実際に飛ばす動きはしないので単にルーティングテーブルみたいな感じか。
リンク先のパス名とコンポーネントを持たせる。

simpleRouter.js

import A from './components/cmpA'
import B from './components/cmpB'
import C from './components/cmpC'

export default {
    '/A': A,
    '/B': B,
    '/C': C
}

リンク先になるコンポーネントファイルたち

cmpA.vue

<template>
    <div>コンポーネントＡ</div>
</template>

<script>
export default {

}
</script>

<style scoped>
div {
    color:green;
}
</style>

cmpB.vue

<template>
    <div>コンポーネントＢ</div>
</template>

<script>
export default {

}
</script>

<style scoped>
div {
    color:blue;
}
</style>

cmpC.vue

<template>
    <div>コンポーネントＣ</div>
</template>

<script>
export default {

}
</script>

<style scoped>
div {
    color:red;
}
</style>

呼び出し元になるコンポーネントファイル

ここで実際にルーティング。
単純にパス名取ってルーティングテーブルからコンポーネントを引っ張る。

cmpP.vue

<template>
    <div id="Parent">
        <a href="/">親コンポーネント</a><br/>
        <a href="/A">cmpAを表示</a>
        <a href="/B">cmpBを表示</a>
        <a href="/C">cmpCを表示</a>
        <component :is="cmp"/>
    </div>
</template>

<script>
import simpleRouter from '../simpleRouter.js'

export default {
    data() {
        return {
            cmp: simpleRouter[window.location.pathname],
        }
    }
}

window.addEventListener('popstate', () => {
  app.currentRoute = window.location.pathname
})
</script>

おわり

自分用なのでこのくらいで十分ですね。部分的な更新とかぬるぬる遷移するようなやつはまた別にやりましょう。
Not Foundくらいは対応しないといけないと思う。