How to make VueJs SPA navbar dynamic


#1

I am building a laravel/vuejs Single Page App with all the components mounted on a single page (welcome.blade.php file) with vue-router. Inside this root blade file, i have included my laravel navbar blade component like so;

@section('content')

   @include('layouts.navbar')

   <router-view></router-view>

@endsection

In the component on the home page, i have a huge banner and i want to dynamically change the background of the navbar to transparent and also the text colors by adding an Id when the route is ‘/’ like so;

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

and this css to apply to the #home_nav;

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

Other routes will have the default nav with coloured background and text.
The issue now is that when i go to other routes i keep getting the transparent navbar unless i reload the page. How do i fix this?