Laravel+Vue+Inertia项目router-link组件解析失败问题求助

我是Vue和Laravel新手，通过Laravel CLI创建了集成Vue与Inertia的项目，引入Bootstrap的Header组件后出现Failed to resolve component: router-link错误，导航项无法点击。未修改Bootstrap的代码，尝试通过npm安装router后问题仍未解决。

相关代码如下：

app.js #

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

Header.vue（来自Bootstrap） #

<template>
    <header>
        <!-- Navbar -->
        <MDBNavbar expand="lg" light bg="white" container>
            <MDBNavbarToggler
                target="#navbarExample02"
                @click="collapse2 = !collapse2"
            ></MDBNavbarToggler>
            <MDBCollapse id="navbarExample02" v-model="collapse2">
                <MDBNavbarNav class="mb-2 mb-lg-0">
                    <MDBNavbarItem to="#" active>
                        Home
                    </MDBNavbarItem>
                    <MDBNavbarItem to="#">
                        Features
                    </MDBNavbarItem>
                    <MDBNavbarItem to="#">
                        Pricing
                    </MDBNavbarItem>
                    <MDBNavbarItem to="#">
                        About
                    </MDBNavbarItem>
                </MDBNavbarNav>
            </MDBCollapse>
        </MDBNavbar>
        <!-- Navbar -->
        <!-- Background image -->
        <div
            class="p-5 text-center bg-image"
            style="
        background-image: url('https://mdbootstrap.com/img/new/slides/041.webp');
        height: 400px;
      "
        >
            <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">
                <div class="d-flex justify-content-center align-items-center h-100">
                    <div class="text-white">
                        <h1 class="mb-3">Heading</h1>
                        <h4 class="mb-3">Subheading</h4>
                        <MDBBtn tag="a" lg outline="light"
                                href="#!"
                                role="button"
                        >Call to action
                        </MDBBtn>
                    </div>
                </div>
            </div>
        </div>
        <!-- Background image -->
    </header>
</template>
<script>
import { MDBBtn, MDBNavbar, MDBNavbarToggler, MDBNavbarNav, MDBNavbarItem, MDBCollapse } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
// import router from "./router";

export default {
    components: {
        MDBBtn,
        MDBNavbar,
        MDBNavbarToggler,
        MDBNavbarNav,
        MDBNavbarItem,
        MDBCollapse,
    },
    setup() {
        const collapse2 = ref(false);
        return { collapse2 };
    },
};
</script>

错误截图：

问题根源 #

Inertia项目不需要单独安装Vue Router，它自身封装了客户端路由逻辑。而MDB的MDBNavbarItem组件默认依赖Vue Router的router-link，直接使用会因找不到该组件报错。另外，手动安装Vue Router会和Inertia路由冲突，反而加重问题。

解决步骤 #

1. 卸载多余的Vue Router（如果之前安装过）：

npm uninstall vue-router

2. 替换导航组件为Inertia原生组件
   有两种可行方案：

方案一：使用Inertia的<Link>组件

直接用Inertia提供的Link组件替换MDBNavbarItem，它会自动处理客户端导航，样式上匹配Bootstrap的导航项即可。

修改后的Header.vue代码：

<template>
    <header>
        <!-- Navbar -->
        <MDBNavbar expand="lg" light bg="white" container>
            <MDBNavbarToggler
                target="#navbarExample02"
                @click="collapse2 = !collapse2"
            ></MDBNavbarToggler>
            <MDBCollapse id="navbarExample02" v-model="collapse2">
                <MDBNavbarNav class="mb-2 mb-lg-0">
                    <Link href="/" class="nav-link active">
                        Home
                    </Link>
                    <Link href="/features" class="nav-link">
                        Features
                    </Link>
                    <Link href="/pricing" class="nav-link">
                        Pricing
                    </Link>
                    <Link href="/about" class="nav-link">
                        About
                    </Link>
                </MDBNavbarNav>
            </MDBCollapse>
        </MDBNavbar>
        <!-- Navbar -->
        <!-- Background image -->
        <div
            class="p-5 text-center bg-image"
            style="
        background-image: url('https://mdbootstrap.com/img/new/slides/041.webp');
        height: 400px;
      "
        >
            <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">
                <div class="d-flex justify-content-center align-items-center h-100">
                    <div class="text-white">
                        <h1 class="mb-3">Heading</h1>
                        <h4 class="mb-3">Subheading</h4>
                        <MDBBtn tag="a" lg outline="light"
                                @click="router.visit('/call-to-action')"
                                role="button"
                        >Call to action
                        </MDBBtn>
                    </div>
                </div>
            </div>
        </div>
        <!-- Background image -->
    </header>
</template>
<script>
import { MDBBtn, MDBNavbar, MDBNavbarToggler, MDBNavbarNav, MDBCollapse } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
import { Link, router } from '@inertiajs/vue3';

export default {
    components: {
        MDBBtn,
        MDBNavbar,
        MDBNavbarToggler,
        MDBNavbarNav,
        MDBCollapse,
        Link
    },
    setup() {
        const collapse2 = ref(false);
        return { collapse2, router };
    },
};
</script>

方案二：修改MDBNavbarItem的标签并绑定Inertia导航事件

保留MDBNavbarItem，将其tag设为<a>，并通过@click调用Inertia的router.visit方法实现客户端导航：

<MDBNavbarItem tag="a" @click="router.visit('/')" active>
    Home
</MDBNavbarItem>

需要在组件中导入router并在setup中返回：

import { router } from '@inertiajs/vue3';

// ...

setup() {
    const collapse2 = ref(false);
    return { collapse2, router };
}

3. 确保后端路由配置正确
   Laravel后端需要配置对应的路由，指向Inertia的页面组件，例如：

// routes/web.php
use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Home');
});

Route::get('/features', function () {
    return Inertia::render('Features');
});

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