如何在 laravel 刀片视图中构造 vue.js 组件答案

【问题标题】：How to structure vue.js components inside laravel blade view如何在 laravel 刀片视图中构造 vue.js 组件
【发布时间】：2019-03-18 08:25:44
【问题描述】：

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

【问题讨论】：

标签： laravel vue.js

【解决方案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>

【讨论】：

谢谢@Richard。出于性能目的，我希望将其设为 SPA，这样每次点击广告时都不会向服务器发出请求，这就是为什么我更喜欢第一个选项的原因。但是我遇到了另一个问题，如何将 laravel 包含的导航栏和布局服务到 vue 文件中？

【解决方案2】：

vue.js 是 spa 框架，不需要在刀片中做所有事情都在 vue 中完成。搜索一下vue router , vuex , 做个简单好看的。

【讨论】：

【解决方案3】：

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

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

【讨论】：