vue-antd-admin使用体验(三) 新建页面并导入目录

本篇, 我们来学习如何新建页面并展示在侧边栏中

我们以新建一个请求测试页(request_test)为例子

一. 新建页面

我们新建src\pages\api_test文件夹
在里面建立四个文件:

文件夹	用途
API_test.vue	页面
i18n.js	国际化配置
index.js	页面暴露脚本
index.less	页面less样式配置

我们先忽略国际化和样式 写一个简单的页面

1. index.js

这个文件是为了暴露页面给路由

import API_test from './API_test.vue'
export default API_test

2. API_test.vue

先写一个模板出来

<template>
  <h2>API_test</h2>
</template>

<script>
export default {};
</script>

<style>
</style>

二. 配置目录(非动态路由)

我们打开src\router\config.js
在options对象里找到 path: '/',的对象, 其children属性的数组就对应着菜单的配置

我们添加一个菜单项

{
          path: 'api_test',
          name: 'API测试页',
          meta: {
            icon: 'ie'
          },
          component: () => import('@/pages/api_test')
        },

我们打开页面发现已经配置好了路由

三. 编写具体页面

稍微写一下具体页面: 要能输入API接口, 能请求API, 能展示结果

根据之前的分析, 请求应该是通过服务