在我的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;
}
然而,当我转到其他路线时,除非我重新加载页面,否则我总是得到一个透明的导航栏。我该如何解决这个问题?
发布于 2019-03-20 18:40:16
尝试检查window.location.href以获取路径的已挂载()状态上的当前路径,并在该条件下添加css
发布于 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';
}
}
},
https://stackoverflow.com/questions/55256320
复制相似问题