Question

我正在创建一个使用Vue Router的单页应用程序（SPA），因此它主要由Vue组件组成，并具有一个刀片组件，可以使用它们将所有组件组合在一起

<router-view></router-view>

我想知道如何将控制器内部计算的数据传递给Vue组件。我目前的操作方式是通过暴露额外的API端点，例如在我的控制器中：

public function countUsers()
{
        $userCount = DB::table('users')->count();
        return $userCount;
}

然后在api.php中：

Route::get('usercount', 'UserMController@countUsers');

这样，我可以使用对axios.get的{{1}}调用来获取Vue组件中的数据。

是否有更好的方法？数据似乎需要1-2秒才能显示在页面上，而且我无法想象这种实现需要执行20多次计算。

我已经看到了另一种方法，您可以使用刀片模板将数据附加到JavaScript上下文中，但是我不确定如何在Vue路由器上将其用于SPA。

Answer 1

在控制器中获取userCount并将其传递到普通刀片文件。您可以像下面这样在vue中传递变量。

<router-view userCount="{{userCount}}"></router-view>

然后在vue中访问userCount变量，您可以从props加载此变量。

export default {
  props: ['userCount'],
  name: 'router-view',
},
mounted:function(){
    let a = this;
    this.userCount = JSON.parse(this.userCount)
}

有关更多信息，您应该首先阅读文档。它将帮助您彻底理解。 https://vuejs.org/v2/guide/components-props.html

将Laravel数据传递到Vue组件

1 个答案: