我仍在学习vue.js和建立laravel/vue.js广告放置应用程序。我对我的应用程序进行了结构化，使得着陆页（laravel刀片视图）有一个介绍应用程序的大横幅，并在广告列表下方。当用户点击广告时，它会将他/她带到广告的单个页面（这将是一个组件）。我的挑战是，我希望应用程序是一个单页应用程序，但不希望在显示单页组件时显示横幅。我在欢迎视图中放置了一个根组件，然后在组件内部使用router-view导入组件。我的问题是，当我点击广告时，单页组件加载了横幅。我如何使这个布局，使横幅不加载与单页组件？
一种解决方案是将横幅放在一个vue页面中，后面是广告列表，然后在另一个vue页面中没有广告横幅（页面由vue路由器处理）
另一种方法是让广告链接指向由laravel处理的路线，然后laravel提供一个没有横幅的刀片模板，并带有一个只显示相关广告的嵌入式vue应用程序。
Vue还支持嵌套视图，因此，如果您需要多个顶部带有横幅的页面，请在一种页面类型中的横幅下方嵌套视图，然后在另一种页面类型中仅包含广告。
希望这能给你一些想法来帮助解决这个任务。
除此之外：如果您要将广告放置功能构建为整个网站的紧密耦合部分，那么您可能希望使用Vue生成的网站导航栏，而不是Blade中的导航栏，即导航栏的另一个Vue组件。
另一方面，如果您试图构建一个可重用的Laravel软件包，以便在任何Laravel网站上进行广告投放，那么您需要将导航栏从Vue模板中删除，并在广告模块中使用v-if/v-else而不是Vue路由器，因为您不希望代码与Laravel网站争夺路由控制权。
例如。
<template>
<div v-if="selectedAd">
//display selected ad
</div>
<div v-else>
//banner here
<div v-for="(ad, index) in ads" :key="index">
<a href='#' @click.prevent="selectedAd = ad">{{ ad.title }}</a>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ads: [],
selectedAd: null,
}
}
}
</script>
vue.js是spa框架，没必要在vue内部做刀片里的事情。搜索vue路由器，vuex，并轻松做好。
您可以使用vue的v-on:click功能，为广告设置两个变量，为单页组件设置另一个变量。
设置ad变量为true，页面组件变量为false，当使用点击ad时，函数将ad变量切换为false，页面组件变量切换为true。
