vue-router路由一次踩坑

最近在追加路由時，由于疏忽，寫漏東西了，在此記錄下來，以此為鑒：

1、父元件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>
           

2、子元件addgoods.vue

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

3、子元件addshop.vue

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

4、路由設定

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import manage from '@/components/manage'
import addgoods from '@/components/addgoods'
import addshop from '@/components/addshop'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: HelloWorld
    },
    {
      path: '/manage',
      component: manage,
      children: [{
        path: 'addgoods',
        component: addgoods
      },
      {
        path: 'addshop',
        component: addshop
      }]
    }
  ]
})
           

5、運作結果