如何为vue-bottom-navigation底部导航栏添加路由跳转？

1. 技术栈适配问题：你的项目使用的是Inertia.js（代码中已导入@inertiajs/vue3的Link），而非纯Vue Router环境，直接使用vue-router的router-link不会生效——Inertia有独立的路由导航机制，不兼容Vue Router的原生组件。
2. 组件事件拦截：SwipeBottomNavigation组件内部可能处理了点击事件，导致你嵌套的导航组件点击事件被覆盖，无法触发跳转逻辑。

方案1：利用Inertia API手动触发导航 #

监听组件的选项切换事件，在选中项变更时调用Inertia的路由API完成跳转：

<template>
    <div>
        <!-- ... 页面其他内容 ... -->
        <SwipeBottomNavigation 
            :options="options" 
            v-model="selected"
            style=" --swiper-color: #CE9F41; --icon-color: #CE9F41"
            @update:modelValue="handleNavigation"
        >
            <template #icon="{ props }">
                <FontAwesomeIcon :icon="props.icon" />
            </template>
            <template #title="{ props }">
                <b>{{ props.title }}</b>
            </template>
        </SwipeBottomNavigation>
    </div>
</template>

<script setup>
import ApplicationLogo from '@/Components/ApplicationLogo.vue';
import { Link, router } from '@inertiajs/vue3';
import { ref } from 'vue';
import { SwipeBottomNavigation } from 'bottom-navigation-vue';
import 'bottom-navigation-vue/dist/style.css';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import '@fortawesome/fontawesome-svg-core/styles.css';
import { fas } from '@fortawesome/free-solid-svg-icons';

const selected = ref(1);
const options = [
    { id: 1, icon: ['fas', 'comment'], title: 'Messages', path: '/messages'},
    { id: 2, icon: ['fas', 'heart'], title: 'Saved Coaches' },
    { id: 3, icon: ['fas', 'trophy'], title: 'Explore' },
    { id: 4, icon: ['fas', 'clipboard-check'], title: 'Timetable' },
    { id: 5, icon: ['fas', 'circle-user'], title: 'Profile' },
];

const handleNavigation = (selectedId) => {
  const targetOption = options.find(item => item.id === selectedId);
  if (targetOption?.path) {
    router.visit(targetOption.path);
  }
};
</script>

方案2：用Inertia的Link组件包裹元素（需组件支持事件冒泡） #

如果SwipeBottomNavigation不会完全拦截内部元素的点击事件，可以直接用Inertia的Link替换router-link：

<template>
    <!-- ... 页面其他内容 ... -->
    <SwipeBottomNavigation 
        :options="options" 
        v-model="selected"
        style=" --swiper-color: #CE9F41; --icon-color: #CE9F41"
    >
        <template #icon="{ props }">
            <Link v-if="props.path" :href="props.path">
                <FontAwesomeIcon :icon="props.icon" />
            </Link>
            <FontAwesomeIcon v-else :icon="props.icon" />
        </template>
        <template #title="{ props }">
            <b>{{ props.title }}</b>
        </template>
    </SwipeBottomNavigation>
</template>

额外注意事项 #

• 确保Inertia路由配置中已定义/messages等路径对应的页面组件；
• 若实际是纯Vue Router项目（之前注释的vue-router导入为实际依赖），需先完成Vue Router的初始化，再将方案1中的router.visit替换为router.push(targetOption.path)（需导入useRouter）。

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