Vue项目使用bootstrap-vue导航栏出现router-link废弃警告如何解决

警告产生原因 #

你当前使用的 BootstrapVue v2.x 版本在实现带 :to 属性的导航组件时，内部调用了 Vue Router 已废弃的 tag 属性。虽然你使用的是 Vue Router 3.x 版本，但 3.1.0 之后的版本已经提前加入了该属性的废弃告警提示，因此会触发该警告。

解决方法 #

方案1：从根源修复（推荐）

放弃使用 BootstrapVue 导航组件的内置 :to 属性，改用 Vue Router 的 v-slot API 包裹导航组件，既可以消除警告，也能保证路由跳转不会触发页面重载，同时解决直接使用 <router-link> 不生效的问题：

1. 普通导航项替换示例

<router-link :to="{name: 'client'}" custom v-slot="{navigate, isActive}">
  <b-nav-item :active="isActive" @click="navigate">Client</b-nav-item>
</router-link>
<router-link :to="{name: 'company'}" custom v-slot="{navigate, isActive}">
  <b-nav-item :active="isActive" @click="navigate">Company</b-nav-item>
</router-link>
<!-- 剩余Employee、Product、Provider导航项按照以上格式统一替换即可 -->

2. 下拉框导航项替换示例（解决href跳转刷新问题）

<b-nav-item-dropdown text="Transaction" right>
  <router-link :to="{name: 'client'}" custom v-slot="{navigate, isActive}">
    <b-dropdown-item :active="isActive" @click="navigate">Account</b-dropdown-item>
  </router-link>
  <router-link :to="{name: 'settings'}" custom v-slot="{navigate, isActive}">
    <b-dropdown-item :active="isActive" @click="navigate">Settings</b-dropdown-item>
  </router-link>
</b-nav-item-dropdown>

custom 属性会取消 Router Link 默认的 <a> 标签渲染，直接将路由跳转、激活状态逻辑绑定到 BootstrapVue 的导航组件上，完全绕开 BootstrapVue 内部对废弃属性的调用。

方案2：临时屏蔽警告（适合导航项较多不想批量修改的场景）

如果项目内导航项数量多，暂时不想批量修改代码，可以在 Vue Router 实例初始化后添加告警过滤逻辑，只屏蔽该条废弃警告，不影响其他警告的正常输出：

const router = new VueRouter({
  // 保留你原有routes、mode等配置不变
})

router.app.config.warnHandler = function (msg, vm, trace) {
  // 过滤tag属性废弃警告
  if (msg.includes("<router-link>'s tag prop is deprecated")) return
  console.warn(msg, vm, trace)
}

该方案仅做告警屏蔽，不会影响原有路由功能的正常运行，后续升级到 Vue Router 4 前再统一修改代码即可。

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