30-路由嵌套

嵌套路由，主要是由我们的页面结构所决定的。当我们进入到home页面的时候，它下面还有分类，如手机系列，平板系列，电脑系列。当我们点击各个分类的时候，它还是需要路由到各个部分，如点击手机，它肯定到对应到手机的部分。
　　在路由的设计上，首先进入到 home ,然后才能进入到phone, tablet, computer. Phone, tablet, computer 就相当于进入到了home的子元素。所以vue 提供了childrens 属性，它也是一组路由,相当于我们所写的routes。
　　首先，在home页面上定义三个router-link 标签用于导航，然后再定义一个router-view标签，用于渲染对应的组件。router-link 和router-view 标签要一一对应。home.vue 组件修改如下：

<template>
 <div>
  <h1>home</h1>
  <!-- router-link 的to属性要注意，路由是先进入到home
  然后才进入相应的子路由如 phone,所以书写时要把 home 带上 -->
  <p>
   <router-link to="/home/phone">手机</router-link>
   <router-link to="/home/tablet">平板</router-link>
   <router-link to="/home/computer">电脑</router-link>
  </p>
  <router-view></router-view>
 </div>
</template>

{
   path: "/home",
   name: "home",
   component:home,
   children: [
      {
        path: "phone",
        component: phone
      },
      {
        path: "tablet",
        component: tablet
      },
      {
        path: "computer",
        component: computer
      }
   ]
}