Vue & Laravel 加载组件问题

问题描述

我使用 Vue 3、Vue 路由器 4 和 Laravel 8 的简单应用程序有问题，我的问题是主组件没有加载我需要 Ctrl + R 才能看到主组件和其他组件使用Vue路由器的组件没有正确加载这是我下载所有包并运行后的完整代码 npm install,npm run dev & npm run watch :

app.js

require("./bootstrap");

import { createApp } from "vue";

import Main from "./components/App.vue";

import router from "./router";

const app = createApp({});

app.component("main-app",Main);

app.use(router);

app.mount("#app");

router.js

import { createRouter,createWebHistory,routerKey } from "vue-router";
import Home from "./components/pages/Home.vue";
import About from "./components/pages/About.vue";
import NotFound from "./components/pages/NotFound.vue";

const routes = [
    {
        path: "/Home",name: "Home",component: Home,},{
        path: "/About",name: "About",component: About,{
        path: "/:catchAll(.*)",component: NotFound,];

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),routes,});

export default router;

// export default createRouter({
//     history: createWebHistory(),//     routes,// });

welcome.blade.PHP 我命名为 app.blade.PHP

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

<head>
  <Meta charset="utf-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Laravel</title>

  <link rel="stylesheet" href="{{ mix('css/app.css') }}">

</head>

<body>
  <div id="app">
    <main-app />
  </div>
  <script src="{{ mix('js/app.js') }}"></script>
</body>

</html>

App.vue

<template>
    <h1>Hello from the main app</h1>
    <div id="nav">
        <router-link to="/Home">Home</router-link> |
        <router-link to="/About">About</router-link>
    </div>
    <router-veiw />
</template>
<script>
export default {};
</script>

About.vue、Home.vue 和 NotFound.vue 它们具有相同的代码，因此无需在我更改的每个文件中再次编写它们x

<template>
    <p>Hello from X component</p>
</template>
<script>
export default {};
</script>

最后web.PHP

<?PHP

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Back\DashboardController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

// Call main path
Route::get('/',function () {
 return view('app');
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

laravel laravel laravel-mix-vue3 vue-router4 vue.js vuejs3

Vue & Laravel 加载组件问题

问题描述

解决方法

相关问答