Загрузка разных лезвий для разных маршрутов в Laravel - VueJS

Question

Приложение, которое я пытаюсь создать, является одностраничным приложением (SPA). Мое настоящее намерение - загрузить разные блэйды для маршрутов "/ superadmin / *" и других маршрутов, таких как "/home".

Оба шаблона имеют разные стили, поэтому я создал два блэйда, один для superadmin и один для других пользователей .

Итак, в web. php Я использовал приведенный ниже код для загрузки различных блэйдов для каждого маршрута:

Route::get('/', function () {
    return View::make('index');
});

Route::get('/{any}', function ($any) {
    if ($any == 'superadmin' || $any == 'verify-email') {
        return View::make('superadmin');
    } else {
        return View::make('index');
    }
});

Также я использовал пакет layout-broker для переключения между макетами. Это мое приложение. vue:

<template>
  <div id="app">
    <LayoutBroker :layouts="layouts" :current="$route.meta.layout" />
  </div>
</template>
<script>
import LayoutBroker from "vue-layout-broker";
import FrontendLayout from "./layouts/Frontend.vue";
import SuperadminLayout from "./layouts/Superadmin.vue";
import SuperadminLoginLayout from "./layouts/SaLoginLayout.vue";
import ErrorLayout from "./layouts/Error";

const layouts = {
  FrontendLayout,
  SuperadminLoginLayout,
  SuperadminLayout,
  ErrorLayout
};

export default {
  name: "App",
  components: {
    LayoutBroker
  },
  data() {
    return {
      layouts
    };
  }
};
</script>

Итак, я указал, какой макет необходимо загрузить для каждого маршрута в маршрутизаторе. js.

{ path: '/home', name: 'home', component: Home, meta: { layout: 'FrontendLayout', superadmin: false } },
{ path: '/superadmin', name: 'superadmin.login', meta: { layout: 'SuperadminLoginLayout' }, component: saLogin },

И это работает и фактически переключает макет в соответствии с маршрутами.

Но когда он переключается, сначала вся страница css будет сломана. После обновления страница css будет в порядке. Позже я узнал, что при переключении между маршрутами представление / блейд не меняется (в соответствии с кодом в сети. php), и это было причиной проблемы. Вид / блейд не меняется, пока страница не будет перезагружена. Ну, это было очевидно, но как я могу решить эту проблему?

В настоящее время я использую приведенный ниже код в App. vue, который изменяет css в соответствии с макетом Но есть немного мерцание при просмотре страниц.

<div v-if="$route.meta.layout === 'FrontendLayout'">
    <link rel="stylesheet" href="assets/css/style.css" />
</div>
<div v-else>
    <link rel="stylesheet" href="/admin-assets/assets/css/style.css" />
</div>

Я ищу предложения.