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>