[英]How to render Vue 3 router-view in Laravel 9 blade?
我是 Vue.js 的新手,所以我看了很多关于如何在 Laravel Blade 中渲染 Vue.js 组件的教程和论坛,但我没有找到任何解决方案。
在我当前的 app.js 中,我在 App.vue 中渲染路由器视图但是当我想尝试将路由器视图放入 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 文档也没有很好的解释。
如果您能帮助我进一步研究和学习,我将不胜感激。
所以 VueJS 3 作为框架和 Laravel Webpack 组合中使用的 VueJs 3 是两个不同的地方:
在app.js
中:
const app = createApp({})
app.component('example-component', require('./components/ExampleComponent.vue').default);
并在刀片<example-component></example-component>
中使用它
你可以为你的后端 API 创建一个 VueJS 前端的 Web 应用和一个 Laravel 项目,这样你就可以从每个工具的强大功能中受益。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.