后台管理系统-10-vue3之用户管理组件部署子路由和静态页面

文章目录

• 1 配置子路由
• • 1.1 router/index.js(添加路由)
  • 1.2 views/User.vue(用户管理)
  • 1.3 验证路由是否生效
• 2 User.vue(静态页面)
• • 2.1 搜索框和表格的静态搭建
  • 2.2 用户表格的数据获取渲染
  • • 2.2.1 user.js(准备数据)
    • 2.2.2 mock.js(拦截请求的URL)
    • 2.2.3 api.js(axios请求的URL)
  • 2.3 页面布局(User.vue)
  • • 2.3.1 el-table(表格)
    • 2.3.2 性别材料的处理
    • 2.3.3 整体代码(User.vue)
• 3 参考附录

配置子路由，添加新增按钮、搜索框、搜索按钮、表格，模拟数据，转换性别数据并显示在列表中。

1 配置子路由

1.1 router/index.js(添加路由)

1.2 views/User.vue(用户管理)

<template>
  <div>
    user
    </div>
      </template>
        <script set