vue-router@3.5.1出现Vue Router 4相关v-slot警告的原因及配置方法咨询

这条警告是Vue Router官方在3.5.x版本中主动加入的前置升级提示，目的是提前告知开发者Vue Router 4版本的API变更规则，降低后续版本升级的适配成本，不属于版本安装错误或者代码运行错误。

• 场景1：业务代码中使用了<router-link>的v-slot自定义渲染逻辑
  直接在<router-link>标签上添加custom属性即可，示例如下：

<!-- 修改前写法 -->
<router-link to="/target" v-slot="{ navigate, href }">
  <div @click="navigate" :href="href">自定义跳转内容</div>
</router-link>

<!-- 修改后写法 -->
<router-link to="/target" v-slot="{ navigate, href }" custom>
  <div @click="navigate" :href="href">自定义跳转内容</div>
</router-link>

• 场景2：警告由第三方UI组件库内部的<router-link>用法触发
  如果排查后确认不是自有业务代码导致的，可以临时通过Vue全局警告过滤规则屏蔽该提示，该方法仅作为临时方案，优先建议升级对应UI组件库到适配版本：

// 入口文件main.js中添加配置
Vue.config.warnHandler = function (msg, vm, trace) {
  // 过滤指定的vue-router警告
  if (msg.includes('[vue-router] In Vue Router 4, the v-slot API will by default wrap its content with an <a> element')) {
    return
  }
  // 其余警告正常输出
  console.warn(msg, vm, trace)
}

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