如何在Laravel Blade视图内构造vue.js组件

Question

我仍在学习vue.js并构建laravel / vue.js广告展示位置应用程序。 我对应用程序进行了结构设计，以使登录页面（laravel刀片视图）在广告列表的下方有一个大横幅广告介绍该应用程序。当用户单击广告时，它将带他/她进入广告的单个页面（这将是一个组成部分）。 我的挑战是我希望该应用程序成为单页应用程序，但不希望在显示单页组件时显示横幅。 我在欢迎视图中放置了一个根组件，然后在该组件内部使用router-view导入了这些组件。 我的问题是，当我点击广告时，单个页面组件会随横幅一起加载。 如何进行这种布局，以使横幅广告不会与单个页面组件一起加载？

Answer 1

一种解决方案是将横幅广告放置在Vue页面中，然后放置广告列表，然后再创建一个没有广告横幅的Vue页面（由vue-router处理的页面）

另一种方法是让广告链接转到由laravel处理的路线，然后laravel提供不带横幅的刀片模板，并带有仅显示相关广告的嵌入式vue应用。

Vue还支持嵌套视图，因此，如果您需要多个页面（横幅位于顶部），则嵌套视图位于横幅下方（在一种类型的页面中，然后是另一种仅包含广告的页面）。

希望能给您一些想法以帮助解决任务。

除此之外：如果您将广告展示位置功能构建为整个网站的紧密结合部分，那么您可能希望拥有由Vue生成的网站的导航栏，而不是将其放置在Blade中，例如，导航栏。

另一方面，如果您试图构建可重复使用的Laravel软件包以在任何Laravel网站上进行广告展示，则需要将导航栏放在Vue模板之外，并在广告模块中使用v-if / v-else而不是Vue-router，因为您不希望您的代码与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>

Answer 2

vue.js是spa框架，不需要刀片内所有在vue内部完成的事情。 搜索有关vue router，vuex的信息，并使其外观简单易行。

Answer 3

您可以使用vue的v-on：click函数，并为广告设置两个变量，为单个页面组件设置另一个变量。

将ad变量设置为true，并将页面组件变量设置为false，当用户点击广告时，该函数会将ad变量切换为false，并将页面组件变量设置为true。