如何在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。