【发布时间】：2020-08-23 22:36:43
【问题描述】：
我可能让这变得比它需要的更复杂，但是有没有人知道如何为我的每个页面换出自定义横幅图像（当路由更改为索引页面以外的任何内容时）？ 我的插槽工作正常，但需要更改非索引横幅中的背景图片。这是我的代码：
App.vue并且只显示主页横幅：
<template>
<div id="app">
<BannerHome v-if="isHomeView" />
<main id="routerView">
<RouterView :key="$route.fullPath" />
</main>
<Footer />
</div>
</template>
<script>
import BannerHome from '@/components/BannerHome.vue'
import Footer from '@/components/Footer.vue'
export default {
name: 'App',
components: {
BannerHome,
Footer
},
computed: {
isHomeView() {
return this.$route.fullPath === '/'
}
}
}
</script>
非索引页面示例 (
About.vue)：
<template>
<article>
<banner>
<template v-slot:titleTop>Mission Focused</template>
<template v-slot:titleBottom>
Dedicated To Service
</template>
</banner>
<section class="container-md pb-5">
<h1>About Page</h1>
</section>
</article>
</template>
<script>
import Banner from '@/components/Banner.vue'
export default {
name: 'About',
components: {
Banner
}
}
</script>
非索引页面的横幅组件 (
Banner.vue)。 注意背景图片。如何为每个非索引页面换掉这个？现在所有非索引页面都会显示背景图片。
<template>
<header>
<MainNav />
<div class="container">
<h1><em><slot name="titleTop"></slot><br />
<span class="pl-3"><slot name="titleBottom"></slot></span></em>
</h1>
</div>
</header>
</template>
<script>
import MainNav from '@/components/MainNav.vue'
export default {
name: 'Banner',
components: {
MainNav
}
}
</script>
<style lang="scss" scoped>
header {
position: relative;
width: 100%;
// set this page height here
height: 20em;
text-transform: uppercase;
}
header::before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 6em;
width: 100%;
// set this page height here
height: calc(20em + 10em);
z-index: -1;
transform: skewY(-3.5deg);
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url('../assets/mockphoto.jpg') < -----how to swap out this image?
no-repeat left top,
linear-gradient(#4e4376, #2b5876);
background-size: cover;
border-bottom: 0.2em solid #fff;
}
h1 {
font-size: 1.75rem!important;
font-weight: 700!important;
letter-spacing: 0.01em;
padding: 2.5rem 0 0 0;
// text-shadow: 0.022em 0.022em 0.022em #111;
color: #fff;
}
</style>
顺便说一句，我也在使用 Gridsome...所以如果还有一种简单的方法可以通过 GraphQL 访问页面数据，我也可以使用它。感谢您的帮助！
【问题讨论】：