带有 Laravel 和 Vue 的 SPA 导航栏

Question

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

我希望它可以用作 SPA。我正在使用 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>

这是来自我的导航栏的 sn-p。当我单击上面的每个按钮时，我想渲染该组件而不必重新加载整个页面。下面的代码是 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 文件？

附：我知道我可以通过将变量传递给每个组件来破解它，我可以使用该变量来隐藏或显示每个组件，但是这将是不好的编码习惯，因此我正在寻找更好的方法。

Answer 1

你只需要使用官方插件Vue Router，它可以帮助你开发一个SPA

https://router.vuejs.org/