Режим истории маршрутизатора Vue.js с резервной маршрутизацией ServiceStack и префиксом Api - PullRequest
Новая
       11

Режим истории маршрутизатора Vue.js с резервной маршрутизацией ServiceStack и префиксом Api

0 голосов
/ 30 августа 2018

  1. Каждый клиентский маршрут начинается с хэша. Как включить режим истории в Vue Router, не нарушая маршрутизацию API?

  2. Также я бы предпочел не начинать свои маршруты с "/ api". Маршрутизация на стороне клиента не работала с Config.HandlerFactoryPath, установленным в «api». Есть ли способ добиться этого?

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 ROUTER 

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

1 Ответ

0 голосов
/ 30 августа 2018

Цель [FallbackRoute] - вернуть домашнюю страницу по несоответствующим маршрутам, поэтому, если маршрут определен только на клиенте, тогда запросы полной страницы вернут домашнюю страницу, чтобы клиентские маршруты могли обрабатывать маршрутизацию.

Невозможно иметь совпадающие серверные и клиентские маршруты, поскольку клиентские маршруты нуждаются в резервном обработчике на сервере, чтобы возвращать домашнюю страницу, которая происходит только при несовпадающих запросах.

...