vue3 TS vite vben-admin 新建页面路由 请求接口

在Vue3 + TypeScript + Vite + Vben Admin中创建一个新页面并添加路由以请求接口的步骤如下：

1. 创建新页面组件：

// src/views/your-page/index.vue
<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'YourPage',
  setup() {
    // 设置函数，请求接口等
    return {};
  },
});
</script>

2. 添加新页面路由：

// src/router/routes/modules/your-page.ts
import { RouteRecordRaw } from 'vue-router';
import YourPage from '@/views/your-page/index.vue';
 
const yourPageRoutes: Array<RouteRecordRaw> = [
  {
    path: '/your-page',
    name: 'YourPage',
    component: YourPage,
    meta: {
      title: '你的页面',
      // 可能的权限等标签
    },
  },
];
 
export default yourPageRoutes;

3. 在主路由文件中引入新页面路由：

// src/router/routes/modules/dynamic-route.ts
import { FramePages } from '@/views/frame/frame-pages';
import yourPageRoutes from './your-page';
 
const modules = [FramePages, yourPageRoutes];
 
export const asyncRoutes = modules.flat();

4. 使用API请求接口（例如使用Axios）：

// src/api/your-page.ts
import request from '@/utils/request';
 
export function fetchData() {
  return request({
    url: '/your-api-endpoint',
    method: 'get',
  });
}

5. 在页面组件中调用API请求：

// src/views/your-page/index.vue
<script lang="ts">
import { defineComponent } from 'vue';
import { fetchData } from '@/api/your-page';
 
export default defineComponent({
  name: 'YourPage',
  setup() {
    const getData = async () => {
      try {
        const { data } = await fetchData();
        // 处理接口数据
      } catch (error) {
        // 处理错误
      }
    };
 
    getData();
 
    return {};
  },
});
</script>

确保你已经配置了API请求库（如Axios）和Vite的插件来处理TypeScript。

以上步骤提供了一个简化的流程，实际项目中可能需要更多的配置和安全性考虑，例如权限校验、错误处理等。