Question

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

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

for (let i = 0; i < 10000000; i++) {
    try {
        const res = await getData(i);
        console.log(`successs ${i}`);
    } catch (e) {
        console.log(`fail ${i}`);
    }
    await wait(1000);
}

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

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

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

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

Answer 1

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

https://router.vuejs.org/

带Laravel和Vue的SPA导航栏

1 个答案: