带有 ServiceStack 路由回退和 Api 前缀的 Vue.js 路由器历史模式 [英] Vue.js router history mode with ServiceStack routing fallback and Api prefix

问题描述

1. 每个客户端路由都以哈希开头.如何在不干扰 api 路由的情况下在 Vue Router 中启用历史模式?

1. Every client side route starts with a hash. How can I enable History Mode in Vue Router without disturbing the api routing?

另外，我不想用/api"开始我的路线.客户端路由在 Config.HandlerFactoryPath 设置为api"时不起作用.有没有办法实现它?

Also I would prefer not to have to start my routes with "/api". Client side routing didnt work with Config.HandlerFactoryPath set to "api". Is there a way to achieve it?

APPHOST

public class AppHost : AppHostBase
{
    private BackendSettings _settings;
    private IHostingEnvironment _environment;

    public AppHost(BackendSettings settings, IHostingEnvironment environment) : base("Template.Www", typeof(SurveyService).Assembly)
    {
        _settings = settings;
        _environment = environment;

        Routes                
            .Add<GetSurvey>("/api/survey/{id}", "GET");
    }

    public override void Configure(Container container)
    {
        bool isDevelopment = _environment.IsDevelopment();

        Plugins.Add(new TemplatePagesFeature());

        SetConfig(new HostConfig
        {
            AddRedirectParamsToQueryString = true,
            DebugMode = isDevelopment,
        });
    }
}

启动

public class Startup
{
    public IConfiguration Configuration { get; }
    public Startup(IConfiguration configuration) => Configuration = configuration;

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        var backendSettings = GetBackendSettings();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseStaticFiles();

        app.UseServiceStack(new AppHost(backendSettings, env));
    }

    private BackendSettings GetBackendSettings()
    {
        var settings = new BackendSettings();
        Configuration.GetSection("Backend").Bind(settings);
        return settings;
    }

    private FrontendSettings GetFrontendSettings()
    {
        var settings = new FrontendSettings();
        Configuration.GetSection("Frontend").Bind(settings);
        return settings;
    }
}

请求模型

[Exclude(Feature.Metadata)]
[FallbackRoute("/{PathInfo}", Matches = "AcceptsHtml")]
public class Fallback
{
    public string PathInfo { get; set; }
}

VUE路由器

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/test',
      component: Test
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
})

推荐答案

[FallbackRoute] 的目的是在不匹配的路由上返回主页，所以如果路由只定义在客户端然后整页请求将返回主页，以便客户端路由可以处理路由.

The purpose of the [FallbackRoute] is to return the home page on unmatched routes, so if the route is only defined on the client then full page requests will return the home page so the client routes can handle the routing.

不可能有匹配的服务器路由和客户端路由，因为客户端路由需要服务器上的回退处理程序来返回主页，这只会发生在不匹配的请求上.

It’s not possible to have matching server routes and client routes as client routes need the fallback handler on the server to return the home page which only happens on unmatched requests.

这篇关于带有 ServiceStack 路由回退和 Api 前缀的 Vue.js 路由器历史模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！