在 VueJS 中将 laravel 路由作为道具传递时出错答案

【问题标题】：Error when passing a laravel route as a props in VueJS在 VueJS 中将 laravel 路由作为道具传递时出错
【发布时间】：2020-09-18 02:44:48
【问题描述】：

我想在 vue js 组件中使用刀片语法 route() 所以我想我应该使用这样的东西：

<nav-bar 
:user="{{ json_encode(Auth::user()) }}" 
:authPath= "{{ route('auth') }}">

</nav-bar>

但控制台中出现错误： app.js:86258 [Vue 警告]：编译模板时出错：

无效的表达式：意外的标记'：'在

我做错了什么？

【问题讨论】：

尝试不使用：<nav-bar user="{{ json_encode(Auth::user()) }}" authPath= "{{ route('auth') }}"> </nav-bar>
是的，那些作品，之前尝试过，但我需要它们都是道具

【解决方案1】：

您可以通过标记将属性传递给 Vue 组件。这称为数据绑定。喜欢

<nav-bar 
authPath="{{ route('auth') }}">
</nav-bar>

Vue 传递 props 的另一种方法是使用 v-bind: 或 :(冒号)，在这种情况下，您必须同时使用双引号和单引号。

<nav-bar 
authPath="'{{ route('auth') }}'">
</nav-bar>

如果没有两个引号，您将收到 Vue 警告。

【讨论】：

【解决方案2】：

你的 {{ route('auth') }} 最终会返回类似 http://127.0.0.1:8000/auth 的东西 --> 这是一个字符串而不是一个表达式。

只需像这样authPath="{{ route('auth') }}" 删除:

【讨论】：

【解决方案3】：

正如@Digvijay 所说，您不需要：对于 authPath，因为它在传递给 vue 之前不是 vue 变量，它将转换为字符串（@MuktiRaniGosh 的方式也适用）。

但你还有另一个问题，那就是因为 json 语法而导致的 " for user prop。使用 ' 代替所以代码将是

<nav-bar 
:user='@json(Auth::user())'
authPath="{{ route('auth') }}">

</nav-bar>

【讨论】：