在不刷新页面的情况下更改 Laravel 布局的内容视图答案

【问题标题】：Change content view of Laravel layout without page refresh在不刷新页面的情况下更改 Laravel 布局的内容视图
【发布时间】：2018-12-09 02:00:28
【问题描述】：

我一直在寻找如何在我的 Laravel 网站中导航而不刷新网站（页面布局）的一个小时，但我找不到合适的解决方案：一个不仅加载 HTML，而且实际上替换布局中的内容视图。

这是我当前的仪表板：

因此，当单击蓝色区域内的菜单项时，我希望红色内容区域在不刷新页面的情况下发生变化。什么是可扩展的解决方案？我正在尝试尽可能地遵循 DRY（不要重复自己）原则。

哦，请不要将此主题标记为其他主题的克隆，因为我见过大多数主题但没有适当的解决方案。希望有人能帮帮我。

【问题讨论】：

您可能希望使用 laravel 作为 vue 的入口点，而根本不使用刀片（除了 vue 索引）。
另外，你可能想谷歌laravel vue spa
将 laravel 作为 vue.js 的入口点与在常规 laravel 环境中使用 vue.js 有什么区别？
vue 在客户端呈现，不会刷新网站，laravel 总是需要重新加载页面
所以基本上你所要求的只是 laravel 是不可能的，你需要一个第三方库，比如 Vue，来处理这个

标签： laravel vue.js

【解决方案1】：

我相信你可以通过使用 jQuery load 函数来完成这项工作 -

$(function () {
    $("#menu_option_a").on("click", function () {
        $("#dashboard").load("View1.html");
    });
    $("#menu_option_b").on("click", function () {
        $("#dashboard").load("View2.html");
    });
});

【讨论】：

感谢您的回复。据我所知，这只会加载 html。
哇，你好 2008
@Derek 哈哈，只是好奇。 hello 2008 是什么意思？
@Sphinx 在 NPM 出现之前，这是一种流行的设计模式，某些人无需刷新即可模仿单页应用程序

【解决方案2】：

在不加载页面的情况下更改视图意味着我们需要使用 ajax 技术。 Vuejs 是一个前端框架，它允许我们使用它的 axios 库轻松完成它

【讨论】：

【解决方案3】：

你看起来像吗？

Please check this link

用户名：9999999999 通过：test@test

它仅用于演示目的。如果您想要类似的东西，那么您将需要使用前端技术以及 laravel，例如：Vue/Angular/React。

如果您在学习或使用这些技术时遇到任何问题，请告诉我，我会为您提供正确的链接和指导。

【讨论】：

非常感谢。这正是我想要的，使用 Vue.js。现在我有 2 个链接正在更改 id 为 #app 的 div 的内容，它们都可以在没有刷新的情况下工作，但它们都是通过 app.vue 文件加载的，而不是在我的布局视图中。你愿意帮助我使用teamview吗？
@jacko 我认为，您需要阅读本教程，以便了解其工作原理。 [链接] (youtube.com/…) 如果您发现除此之外的任何问题和问题，请随时与我联系:)
我认为这不是正确的教程。我希望我的应用程序在 Laravel 中构建，而不是在 Vue.js 中。我只想让 vue.js 在我的仪表板上导航。不过，我真的很感谢您的帮助。
@jacko 我会帮助你 :) 我尊重你的好奇心，并会在 teamviewer 上与你联系