vue初學篇---router子路由

router子路由

在router檔案夾裡面的index.js添加下面的路由資訊。

{
      path: '/testRouter',
      name: 'testRouter',
      component: testRouter,
      children:[
        {
          path:'testOne',
          name:'testOne',
          component:testOne
        },{
          path:'testChildren',
          name:"testChildren",
          component:testChildren
        }
      ]
    }
           

testRouter.vue代碼，一定要有<router-view></router-view>的标簽，才可以加載對應的子路由，子路由主要用于，頁面的切換，以及加載，類似于底部的tab欄，當點選tab欄之後，切換對應的頁面。 

<template>
  <div style="margin-top: 15rem">
    <p>
    <router-link to="/">test</router-link>
    <router-link to="/testRouter/testChildren">test child</router-link>
    <router-link to="/testRouter/testOne">test one</router-link>
    </p>
    <router-view></router-view>

  </div>
</template>
<script>
  export default {
    name: 'test',
    data () {
      return {
      }
    },

  }
</script>