带有Laravel和Vue的SPA导航栏

Question

我正忙于为我正在从事的个人项目构建前端。这个想法是用户可以为某些数据库表创建条目。这些条目的创建是使用Vue组件完成的。每个组件都对应一个表，等等。我正在使用Laravel在后端使用资源控制器来管理数据库交互，并且使用Axios将数据往返于这些交互（即，我从未将数据从Laravel刀片传递到组件）。

我希望这可以用作SPA。我正在使用Laravel刀片文件来渲染所有组件，但是我想通过Navbar来控制它。

<div class="dropdown">
  <button 
    class="btn dropdown-toggle" 
    type="button" id="dropdownMenu2" 
    data-toggle="dropdown" 
    aria-haspopup="true" 
    aria-expanded="false">
     SubMenu1
  </button>
 <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
  <button class="btn">Show Component1</button>
  <button class="btn">Show Component2</button>
  <button class="btn">Show Component3</button>
 </div>
</div>

这是我的导航栏中的摘录。当我单击上方的每个按钮时，我想呈现该组件而不必重新加载整个页面。下面的代码是home.blade文件。

@extends('layouts.app')

@section('content')


<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <component1></component1>
            <component2></component2>
            <component3></component3>            
        </div>
    </div>
</div>
@endsection

如何在不重新加载页面的情况下从导航栏中单击按钮来呈现每个Vue文件？

P.S。我知道我可以通过向每个组件传递变量来hack，我可以使用该变量来隐藏或显示每个组件，但是这将是不好的编码习惯，因此我正在寻找更好的方法。]

我正忙于为我正在从事的个人项目构建前端。这个想法是用户可以为某些数据库表创建条目。这些条目的创建使用Vue ...

Answer 1

您只需要使用Vue Router，这是一个可以帮助您开发SPA的官方插件