0

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

应用程序.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");

路由器.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>

应用程序.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');
});
4

0 回答 0