134/(前端)订单列表布局与显示——子组件挂载的方式与分类管理vue的结构搭建

1.概述：如何在一个组件中创建子组件

1. 在src的component下去创建一个order文件夹，再创建一个Order.vue
2. 挂载路由：在home下挂载子组件Order.vue

// src/router/index.js
import Vue from 'vue'
import Order  from '../components/order/Order.vue'
// 引入全局样式
import '../assets/css/global.css'
Vue.use(VueRouter)
const routes = [
  // 为login组件创建路由
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    // 引入子组件，创建子路由
    redirect: '/welcome',
    children: [
      {
        path: '/order_list', component: Order
      }
    ]
  }
]
const router = new VueRouter({
  routes
})

export default router

1. 测试效果
   

2.布局子组件的内容流程

1. 使用面包屑：
2. 添加输入框，并绑定搜索函数
3. 添加表格内容标题信息
4. 获取数据，发送请求
5. 由于我们某些字段使用1，0代表特定内容，利用查槽进行更改显示内容

3.代码展示`

首页 订单管理 订单列表

`