Vue.js router history mode with ServiceStack routing fallback and Api prefix

Question

Every client side route starts with a hash. How can I enable History Mode in Vue Router without disturbing the api routing?
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,
        });
    }
}

STARTUP

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;
    }
}

REQUEST MODEL

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

VUE ROUTER

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

mythz mythz · Accepted Answer · 2018-08-30T12:12:38

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.

Vue.js router history mode with ServiceStack routing fallback and Api prefix

1 Answers