Laravel+惯性+Vue：使用<脚本设置时无法导入组件>

Question

tl；dr:使用<script setup>时无法import。

我在页面上有一个表，它通过导航成为AppLayout(导航等(的一部分。我需要将这个AppLayout.vue导入到其他组件(如按钮(旁边。

但我也想将数据库中的数据映射到表中，所以我为此创建了一个路由和一个控制器：

Route::get('/articles', [AppHttpControllersArticleController::class, 'index']);

数据从该控制器发送到包含以下表格的组件：

class ArticleController extends Controller
{
public function index()
{
$articles = Article::all();
return inertia('Articles/Index', compact('articles'));
}
}

如果我想在那里接收这些数据作为道具，我会使用

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';    
import JetButton from '@/Jetstream/Button.vue';
export default {
props: {
articles: Object
}
}

不幸的是，当我使用这个代码时，我不能回到<script setup>。如果我删除设置-以使数据交换工作，我就不能使用导入命令。

通过设置，我得到以下消息：

<script setup> cannot contain ES module exports.

并且在没有设置的情况下，导入被忽略，甚至被PHP Storm直接从代码中删除。

• 我必须使用required吗
• 如何获得道具出口默认值(defineProps()?(
• 使用<script setup>时如何传递道具

Answer 1

我自己解决了。web.hp.中有一个错误

只需要一条路线，我忘记了->name('articles')在路线列表中注册。

Route::get('/articles', [AppHttpControllersArticleController::class, 'index'])->name('articles');

导入的设置如下所示：

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import JetButton from '@/Jetstream/Button.vue';    
const props = defineProps({
articles: Object
})
</script>