如何在 Laravel 9 刀片中渲染 Vue 3 路由器视图？答案

【问题标题】：How to render Vue 3 router-view in Laravel 9 blade?如何在 Laravel 9 刀片中渲染 Vue 3 路由器视图？
【发布时间】：2022-07-20 23:20:40
【问题描述】：

我是 Vue.js 的新手，所以我看了很多关于如何在 Laravel Blade 中渲染 Vue.js 组件的教程和论坛，但我没有找到任何解决方案。

在我当前的 app.js 中，我在 App.vue 中渲染路由器视图但是当我想尝试将 router-view 放在 welcome.blade.php 中时，什么都没有显示...

import './bootstrap';
import {createApp} from 'vue';

import App from './App.vue';
import axios from 'axios';
import router from './router';

const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.use(router);
app.mount('#app');

这是我的 App.vue

<template>
    <div class="container">
        <NavMenu/>
        <router-view></router-view>
    </div>
</template>

所以我想要的是

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <title>{{ env('APP_NAME') }}</title>
</head>

<body>
    <div id="app">
        <router-link :to="{ name: 'home' }">
        <router-link :to="{ name: 'about' }">
      
        <router-view></router-view>
    </div>
    @vite('/resources/js/app.js')

</body>
</html>

已经阅读了关于 stackoverflow 的所有帖子，但没有帮助，Vue 或 Laravel 文档也没有很好的解释。

如果您能帮助我进一步研究和学习，我将不胜感激。

【问题讨论】：

标签： laravel vue.js vuejs3 laravel-9

【解决方案1】：

所以 VueJS 3 作为框架和 Laravel Webpack 组合中使用的 VueJs 3 是两个不同的东西：

路由器在 VueJS 框架中可用
Laravel webpack 中的 VusJS 让您能够添加自定义组件，例如：

在app.js：

const app = createApp({})
app.component('example-component', require('./components/ExampleComponent.vue').default);

并在刀片中使用它<example-component></example-component>

您可以为您的后端 API 创建一个 VueJS 前端的 Web 应用和一个 Laravel 项目，这样您就可以从每个工具的强大功能中受益。

【讨论】：