[Vuejs]-Vuejs Incorrect component definition

by

2👍

✅

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

👤mparkitny

Leave a comment