vue-router路由的一次踩坑

最近在配置路由时，由于低级失误，浪费了点时间，记录下来，以此为鉴：本次用的是父子路由

父组件manage.vue，注意不要遗漏

<template>
  <div>
    <router-link :to="{ path: '/manage/addshop' }">addshop</router-link>
    <router-link :to="{ path: '/manage/addgoods' }">addgoods</router-link>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'manage',
  data () {
    return {
      msg: '欢迎来到manage空间'
    }
  }
}
</script>

子组件addgoods.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'addgoods',
  data () {
    return {
      msg: '欢迎来到addGoods空间'
    }
  }
}
</script>

子组件addshop.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'addshop',
  data () {
    return {
      msg: '欢迎来到addShop空间'
    }
  }
}
</script>

运行完后的结果