如何在 laravel/VueJs SPA 上使用的导航栏动态添加 Id答案

【问题标题】：How to dynamically add an Id to the navbar used on laravel/VueJs SPA如何在 laravel/VueJs SPA 上使用的导航栏动态添加 Id
【发布时间】：2019-08-10 21:14:00
【问题描述】：

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

@extends('layouts.app')

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

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

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

在我的 CSS 中；

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

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

【问题讨论】：

我更喜欢直接使用 style="{{ Route::currentRouteName() === 'home' ? 'background: iceblue; color: #fff;' : '' }}"
谢谢@Vernon ..它是一样的，它在我重新加载页面之前不起作用。
你的重定向是在 Vue JS 中发生的吗？如果是，您可能需要使用 window.location.href
我的路由和所有工作都很好。我的导航栏在刀片上。但是，除非重新加载页面，否则动态添加 Id 并不仅仅发生
是的，只有在页面重新加载时才能更改 ID。因为 PHP 不像 Vue JS 那样在虚拟 DOM 中，它会在页面发生变化时刷新页面。

标签： php css laravel vue.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以将 class 作为 prop 与路由一起传递：

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

【讨论】：

请问你能解释更多吗？我还没有解决这个问题

【解决方案3】：

您可以使用最简单的解决方案。将路由名称放在周围的 div 上，并用 css 定位它。例如

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

或者当您使用路由器视图时，您可以在导航栏组件中获取当前路由路径，并使用它来创建计算属性以返回您需要的类。

<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';

        }
    }
},

【讨论】：