如何为laravel/VueJs SPA上使用的导航栏动态添加Id
如何为laravel/VueJs SPA上使用的导航栏动态添加Id
提问于 2019-03-20 16:22:47
在我的laravel/vuejs Single Page App上，我将所有组件挂载到一个页面(welcome.blade.php文件)上，并在其中包含了我的导航栏刀片组件@include('layouts.navbar')。
@extends('layouts.app')
@section('content')
@include('layouts.homenavbar')
<router-view></router-view>
@endsection我的主页在一个巨大的横幅上有一个透明的背景导航栏。但是，相同的导航栏用于其他页面/组件，但具有彩色背景和白色字体。我试着使用‘t检查传入的路由是否是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;
}然而，当我转到其他路线时，除非我重新加载页面，否则我总是得到一个透明的导航栏。我该如何解决这个问题？
回答 2
Stack Overflow用户
发布于 2019-03-20 18:40:16
尝试检查window.location.href以获取路径的已挂载()状态上的当前路径，并在该条件下添加css
Stack Overflow用户
发布于 2019-09-13 12:46:42
您可以使用最简单的解决方案。将路由名称放在周围的div中，并使用css将其作为目标。例如：
.home .navbar {}
.about .navbar {}或者，当您使用router视图时，您可以在导航栏组件中获取当前路由路径，并使用该路径创建一个计算属性来返回所需的类。
<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';
}
}
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55256320
复制相关文章
相似问题