如何解决Laravel Vue3项目中Vue Router路径'/'无匹配的警告

当在Laravel + Vue 3 + Vue Router 4的项目中访问http://127.0.0.1:8000/时，控制台会抛出以下警告：

[Vue Router warn]: No match found for location with path "/"

问题原因 #

你的Vue Router路由配置中仅定义了/test路径的路由规则，未对根路径/做任何路由匹配设置，导致Vue Router无法找到对应路由，从而触发警告。

解决方案 #

根据业务需求，可选择以下两种方式解决：

方案1：根路径重定向到已有的/test页面

修改routes.js，添加根路径的重定向规则：

import {createRouter, createWebHistory}  from 'vue-router';
import testcomponent from './testcomponent.vue';

const routes = [
    // 添加根路径重定向
    {
        path: "/",
        redirect: { name: 'test' } // 也可以直接写 redirect: "/test"
    },
    {
        path: "/test",
        name: "test",
        component : testcomponent,
    },
];

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

export default router;

方案2：为根路径配置独立的组件

如果需要根路径展示单独的页面，先创建对应的组件（比如Home.vue），再添加路由规则：

import {createRouter, createWebHistory}  from 'vue-router';
import testcomponent from './testcomponent.vue';
import Home from './Home.vue'; // 引入根路径对应的组件

const routes = [
    {
        path: "/",
        name: "home",
        component: Home
    },
    {
        path: "/test",
        name: "test",
        component : testcomponent,
    },
];

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

export default router;

额外说明 #

你的Laravel路由配置（web.php）没有问题，已经将所有非API请求转发到Vue入口页面，无需修改。

内容的提问来源于stack exchange，提问作者Umer Ghouri