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

vue -V
2.9.6
vue init webpack xxx

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

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

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

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

<script>
export default {

}
</script>

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

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

<script>
export default {

}
</script>

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

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

<script>
export default {

}
</script>

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

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