Vue之子路由配置

• 新建两个组件：
  about1.vue

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
export default {
  data(){
    return{
      msg:"这是about1页面"
    }
  },
}
</script>

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
export default {
  data(){
    return{
      msg:"这是about2页面"
    }
  },
}
</script>

about2.vue

• 在router.js里的about配置子路由：

{
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
      children:[
        {
          path: 'about1',
          component: About1
        },
        {
          path: 'about2',
          component: About2
        }
      ]
    },

• About.vue配置子路由：

<template>
  <div class="about">
    这是about组件
    <div>
      <router-link to="/about/about1">about1</router-link>
      <router-link to="/about/about2">about2</router-link>
      <router-view></router-view>
    </div>
  </div>
</template>

App.vue

<template>
  <div id="root">
    <router-link to="home">首页 \</router-link>
    <router-link to="about">关于</router-link>
    <router-view></router-view>
  </div>
</template>