vue中的路由嵌套

1定义组件

const Index = {
      template:`
        
首页
      `
    }
    const Order = {
      template:`
        
订单
      `
    }

    const Food = {
      template:`
        

            
food版块
            

                蛋糕
                大米
                鸡蛋
                
            
        
        
      `
    }

const Cake = {
      template:`
        
蛋糕
      `
    }
    const Rice = {
      template:`
        
大米
      `
    }
    const Egg = {
      template:`
        
鸡蛋
      `
    }

定义路由

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
    })

    

      
    
    首页
    订单
    美食