vue中的路由嵌套

1定义组件

const Index = {
      template:`
        <div>首页</div>
      `
    }
    const Order = {
      template:`
        <div>订单</div>
      `
    }

    const Food = {
      template:`
        <div>
            <div>food版块</div>
            <div>
                <router-link to="/food/cake">蛋糕</router-link>
                <router-link to="/food/rice">大米</router-link>
                <router-link to="/food/egg">鸡蛋</router-link>
                <router-view></router-view>
            </div>
        </div>
        
      `
    }

const Cake = {
      template:`
        <div>蛋糕</div>
      `
    }
    const Rice = {
      template:`
        <div>大米</div>
      `
    }
    const Egg = {
      template:`
        <div>鸡蛋</div>
      `
    }

定义路由

const routes = [
      {
        path: '/', 
        component: Index
      },
      {
        path: '/order', 
        component: Order
      },
      {
        path: '/food', 
        component: Food,
        children: [
            {
              path: '/food/cake', 
              component:Cake
            },
            {
              path: '/food/rice', 
              component:Rice
            },
            {
              path: '/food/egg', 
              component:Egg
            },
        ]
      }

    ]

const router = new VueRouter({
      routes
    })

    const app = new Vue({
      el: '#app',
      router
    })

<div id="app">
    <div class="wrap">
      <router-view></router-view>
    </div>
    <router-link to="/index">首页</router-link>
    <router-link to="/order">订单</router-link>
    <router-link to="/food">美食</router-link>
  </div>