Как динамически добавлять идентификатор в панель навигации, используемую в laravel / VueJS SPA

#php #css #laravel #vue.js

#php #css #ларавель #vue.js #laravel

Вопрос:

В моем одностраничном приложении laravel / vuejs я монтирую все свои компоненты на одной странице (welcome.blade.php файл), и внутри я включил свой компонент navbar blade @include (‘layouts.панель навигации’).

 @extends('layouts.app')

@section('content')
    @include('layouts.homenavbar')
    <router-view></router-view>
@endsection

На моей домашней странице есть прозрачная фоновая панель навигации на огромном баннере. Однако для других страниц / компонентов используется та же навигационная панель, но с цветным фоном и белыми шрифтами. Я попытался использовать itenary, чтобы проверить, является ли входящий маршрут домашним, и добавить идентификатор, который придает навигационной панели прозрачный фон, а если маршрут не является домашним, оставьте цветную фоновую навигационную панель такой;

 <nav class="navbar navbar-default navbar-static-top" id=>"{{ Route::currentRouteName() === 'home' ? "home_nav" : ''}}">
----
</nav>

и в моем css;

 #home_nav{
  background: iceblue;
  color: #fff;
}

Однако, когда я перехожу на другие маршруты, я продолжаю получать прозрачную навигационную панель, пока не перезагружу страницу.
Как мне это исправить?

1. я бы предпочел напрямую использовать style=»{{ Route::currentRouteName() === ‘home’ ? ‘background: iceblue; color: #fff;’ : » }}»

2. Спасибо @Vernon .. это то же самое, это не работает, пока я не перезагружу страницу.

3. происходит ли ваше перенаправление в Vue JS? Если да, возможно, вам потребуется использовать window. location.href

4. Моя маршрутизация и все остальное работает очень хорошо. Моя панель навигации находится на блейде. Но динамическое добавление идентификатора не происходит просто так, пока страница не будет перезагружена

5. Да, идентификатор может быть изменен только при перезагрузке страницы. Потому что PHP не находится в виртуальном DOM, как Vue JS, где он обновит страницу при внесении изменений.

Ответ №1:

Попробуйте проверить window.Расположение.href, чтобы получить текущий маршрут в состоянии mounted() ваших маршрутов и добавить css для этого условия

Ответ №2:

Вы могли бы передать класс в качестве реквизита с маршрутом:

https://router.vuejs.org/guide/essentials/passing-props.html

Ответ №3:

Вы могли бы просто использовать самое простое решение. поместите название маршрута в окружающий div и настройте его с помощью css. например

 .home .navbar {}
.about .navbar {}

Или, поскольку вы используете router view, вы можете получить текущий путь маршрута в вашем компоненте панели навигации и использовать это для создания вычисляемого свойства для возврата нужного вам класса.

 <nav :class="['some','class', backgroundColor]"></nav>

...
computed: {
    backgroundColor() {
        switch (this.$route.fullPath) {
            case ('/'):
                return 'bg-blue';

            case ('/about'):
                return 'bg-pink';

            default:
                return 'bg-red';

        }
    }
},