php - 如何动态地将 Id 添加到 laravel/VueJs SPA 上使用的导航栏

Question

在我的 laravel/vuejs 单页应用程序上，我将我的所有组件安装在一个页面上(welcome.blade.php 文件)，并且在里面我包含了我的导航栏 Blade 组件 @include('layouts.navbar')。

@extends('layouts.app')

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

我的主页在一个巨大的横幅上有一个透明背景的导航栏。但是，相同的导航栏提供给其他页面/组件，但具有彩色背景和白色字体。我尝试使用 itenary 来检查传入路由是否为 home 并添加一个 id，使导航栏具有透明背景，如果路由不是 home，则像这样离开彩色背景导航栏；

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

在我的 CSS 中；

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

但是，当我转到其他路线时，除非我重新加载页面，否则我会一直看到透明的导航栏。 我该如何解决这个问题？

Answer 1

尝试检查 window.location.href 以获取当前路由的 mounted() 状态，并在该条件下添加 css