vuejs Incorrect component definition - vue.js

Question

I have two components - 'HelloIndex' and 'HelloShow'.
The problem is that when I try to do this
this.$router.push({name: 'HelloShow', params: {id: 1}})
, then the 'HelloIndex' component is loaded instead of 'HelloShow'.
In my router:
import Vue from 'vue'
import Router from 'vue-router'
import HelloIndex from '#/components/HelloIndex'
import HelloShow from '#/components/HelloShow'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/index',
name: 'HelloIndex',
component: HelloIndex,
children: [
{
path: ':id/show',
name: 'HelloShow',
component: HelloShow
}
]
}
]
})
HelloIndex.vue:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'helloIndex',
data () {
return {
msg: 'INDEX'
}
}
}
</script>
HelloShow.vue:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'helloShow',
data () {
return {
msg: 'SHOW'
}
}
}
</script>
App.vue
<template>
<div id="app">
<button #click="show">show</button>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
methods: {
show () {
this.$router.push({name: 'HelloShow', params: {id: 1}})
}
}
}
</script>
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
What's wrong with the names of the components?

Answer 1

Parent component which has children should contain <router-view></router-view> in <template> tag. Your HelloIndex.vue file can look like:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'helloIndex',
data () {
return {
msg: 'INDEX'
}
}
}
</script>
If you want to have both components at the same level, so HelloShow won't be a child of HelloIndex you might want to edit your routes.
export default new Router({
routes: [
{
path: '/index',
name: 'HelloIndex',
component: HelloIndex
},
{
path: ':id/show',
name: 'HelloShow',
component: HelloShow
}
]
})
More informations about this topic can be found in vue-router docs