vue3.0+asp.net core webapi实现动态路由

Vue 3.0 和 ASP.NET Core WebAPI 都支持动态路由，实现起来也比较简单。

首先，在 ASP.NET Core WebAPI 中，我们需要在 Startup.cs 中配置路由。可以使用以下代码：

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller}/{action}/{id?}");
});

这个配置会将请求转发到对应的控制器和方法中。其中，{controller} 和 {action} 表示控制器和方法名，{id?} 表示可选参数。

接着，在 Vue 3.0 中，我们可以使用 vue-router 实现动态路由。可以使用以下代码：

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/:controller/:action/:id?',
            name: 'dynamic',
            component: DynamicComponent
        }
    ]
})

这个配置会将请求转发到 DynamicComponent 组件中。其中，:controller、:action 和 :id? 表示控制器、方法名和可选参数。

最后，我们可以在 DynamicComponent 组件中调用 ASP.NET Core WebAPI 中的动态路由。可以使用以下代码：

axios.get(`/api/${this.$route.params.controller}/${this.$route.params.action}/${this.$route.params.id}`)
    .then(response => {
        // 处理响应
    })
    .catch(error => {
        // 处理错误
    })

这个代码会发送请求到对应的控制器和方法中，其中，this.$route.params.controller、this.$route.params.action 和 this.$route.params.id 分别对应控制器、方法名和参数。

以上就是 Vue 3.0 和 ASP.NET Core WebAPI 实现动态路由的基本步骤。