Как структурировать компоненты vue.js в представлении лезвия laravel

Question

Я все еще изучаю vue.js и создаю приложение для размещения объявлений laravel / vue.js.Я структурировал свое приложение таким образом, чтобы целевая страница (вид лезвия laravel) имела большой баннер, представляющий приложение и под списком объявлений. Когда пользователь нажимает на объявление, он переносит его на одну страницу объявления.(это будет компонент).Моя задача состоит в том, чтобы я хотел, чтобы приложение было одностраничным, но не хочу, чтобы баннер отображался при отображении одностраничного компонента.Я поместил корневой компонент в окне приветствия, а затем внутри компонента я использовал router-view для импорта компонентов.Моя проблема в том, что когда я нажимаю на объявление, компонент страницы загружается вместе с баннером.Как сделать так, чтобы баннер не загружался с одним компонентом страницы?

Answer 1

Одним из решений будет размещение баннера на странице vue с последующим списком объявлений, а затем создание другой страницы vue без баннера для рекламы (страницы обрабатываются vue-router)

Другой подход будетесли рекламные ссылки идут на маршрут, который обрабатывается laravel, то laravel предоставляет шаблон блэйда без баннера и со встроенным приложением vue, которое просто показывает релевантное объявление.

Vue также поддерживает вложенные представления, так что есливам нужно несколько страниц с баннером вверху, вложенным представлением под баннером на одном типе страницы, а затем на другом типе страницы только с рекламой.

Надеюсь, что это даст вам некоторые идеи, которые помогут решить задачу.

В дополнение к этому: если вы строите функциональность размещения рекламы как тесно связанную часть целого веб-сайта, то вам может потребоваться навигационная панель для сайта, созданная Vue, а не ее в Blade.т.е. другой компонент Vue для панели навигации.

С другой стороны, если вы пытаетесь создать повторно используемый пакет 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

Вы можете использовать функцию v-on: click для vue и установить две переменные для объявления и другую для компонента на одной странице.

Установите для переменной объявления значение true, а для переменной компонента страницы - falseи когда пользователь нажимает на объявление, функция переключает переменную объявления на false, а переменную компонента страницы на true.

Answer 3

vue.js - это спа-фреймворк, не нужно делать что-то в блейде, все сделано внутри vue.найдите vue router, vuex и сделайте это легко, хорошо выглядишь.