vuejs 组件定义不正确答案

【问题标题】：vuejs Incorrect component definitionvuejs 组件定义不正确
【发布时间】：2017-12-27 11:34:30
【问题描述】：

我有两个组件 - 'HelloIndex' 和 'HelloShow'。

问题是当我尝试这样做时

this.$router.push({name: 'HelloShow', params: {id: 1}})

，然后加载“HelloIndex”组件而不是“HelloShow”。在我的路由器中：

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

组件名称有什么问题？

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

有子组件的父组件应该在<template> 标签中包含<router-view></router-view>。您的 HelloIndex.vue 文件可能如下所示：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'helloIndex',
  data () {
    return {
      msg: 'INDEX'
    }
  }
}
</script>

如果您想让两个组件处于同一级别，那么HelloShow 不会是HelloIndex 的子级，您可能需要编辑您的路线。

export default new Router({
  routes: [
    {
      path: '/index',
      name: 'HelloIndex',
      component: HelloIndex
    },
    {
      path: ':id/show',
      name: 'HelloShow',
      component: HelloShow 
    }
  ]
})

关于这个话题的更多信息可以在vue-routerdocs找到

【讨论】：