我正忙着为我正在进行的一个个人项目构建前端。其思想是用户可以为某些数据库表创建条目。这些条目的创建是使用Vue组件完成的。每个组件都对应一个表等。我使用Laravel作为后端，使用资源控制器来管理数据库交互，并使用Axios向这些组件传递数据（即，我从不将数据从Laravel blade传递到组件）。

我想把它作为一个水疗中心。我正在使用Laravel刀片文件来渲染我的所有组件，但是我想通过导航栏来控制它。

<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>

这是我的导航栏中的一个片段。当我单击上面的每个按钮时，我希望在不重新加载整个页面的情况下呈现该组件。下面的代码就是家。刀片锉刀。

@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.我知道我可以通过向每个组件传递一个变量来破解它，我可以用它来隐藏或显示每个组件，但是这将是糟糕的编码实践，因此我正在寻找更好的方法。