vue 路由器路径 \'/tasks\' 不工作，但路径 \'/\' 工作。为什么？答案

【问题标题】：vue router path '/tasks' is not working, but path '/' is working. why is it?vue 路由器路径 \'/tasks\' 不工作，但路径 \'/\' 工作。为什么？
【发布时间】：2022-11-02 13:42:25
【问题描述】：

我是 Vue3 的新手，也是英语的初学者。

我用 laravel9 和 vue3 开发。

我的问题很简单，但是路径设置不顺利。

当我访问 url localhost:8080/tasks 此网址返回 404 未找到，我收到以下类型错误

GET http://localhost:8000/tasks 404 (Not Found)

我不知道原因，但是当我将路径：'/tasks' 重写为路径'/' 时，localhost:8080 返回我想要的组件。

我有以下文件。

router.js

import { createRouter, createWebHistory } from "vue-router";
import TaskListComponent from "./components/TaskListComponent.vue";


const router = createRouter({
    history: createWebHistory(),
    routes: [

        {
            path: '/tasks',
            name: 'tasks.list',
            component: TaskListComponent
        }
    ]
})

export default router

App.vue

<script setup>
import HeaderComponent from "./components/HeaderComponent.vue";
</script>

<template>
    <HeaderComponent />
    <router-view></router-view>
</template>

bootstrap.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router.js"

const app = createApp(App);

app.use(router);

app.mount("#app");

【问题讨论】：

请专注于如何正确突出您的代码，而不是在您的消息中写垃圾邮件。
好的！很抱歉给你添麻烦了。
我在我的答案中添加了一个公共 github 存储库。
@Duannx 谢谢，路飞！我会用它作为参考！
我找到了解决方案。在 web.php 中添加以下代码 Route::get('{any?}', function () { return view('welcome'); })->where('any', '.*');

标签： laravel vuejs3 vue-router4

【解决方案1】：

我使用Vue's CLI 创建了一个项目，然后继续检查所有相关部分。

我拿走了您的代码并应用了各种更改：

我的入口点是main.js，而不是bootstrap.js，但代码方面没有变化
在App.vue 中，我没有任何HeaderComponent 但无论如何这应该不是问题
在router/index.js 中，我只更改了组件的以下内容，因为无论如何使用别名比使用相对路径更好

import TaskListComponent from "@/components/TaskListComponent.vue"

启动服务器

pnpm dev

给我一些端口，一旦跟随/tasks 路径，我可以按预期看到组件。

路线也正确定义

这是我的项目目录

而且我在控制台中没有任何错误。

这是公共 github 仓库：https://github.com/kissu/so-v3-working-router

【讨论】：

太感谢了！但实际上，我在 create vue 和 vue CLI 中尝试了这段代码并且做得很好。我正在尝试使用 laravel9 和 vue3。也许，这可能会发生问题。 stackoverflow.com/questions/71856260/vue-3-router-with-laravel。这个帖子和我的问题一样。感谢您不遗余力地用我的代码实现 vue 开发。
@sorasakamoto 哦，我猜你正在使用 Vue里面Laravel 在这里。不幸的是，我不知道如何调试那个，因为我对 Laravel 没有任何经验，抱歉。
没关系。感谢您的合作。

【解决方案2】：

web.php 中的以下内容修复了该问题

Route::get('{any?}', function () {
    return view('welcome');
})->where('any', '.*');

【讨论】：