solving vue-router deprecation warning-CodePudding

I am new to a project and trying to fix some vue bugs. I saw these warnings on my browser:

[vue-router] <router-link>'s tag prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link.
[vue-router] <router-link>'s event prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link.

However, the only place I saw that router-link was used didn't include the tag or event props. Here is how the code looks like:

<template v-slot:cell(name)="data">
    <router-link :to="`/org/${data.item.orgid}/repo/${data.item.repoid}`">
        {{ data.value }}
    </router-link>
</template>

Any idea on what this is happening? My vue version is [email protected]. Thanks!

CodePudding user response：

Those warnings are coming from usage of <router-link> in bootstrap-vue package, which hasn't been updated in quite some time.

First of all, they're just warnings. You should only be concerned about them if you planned on upgrading the app to Vue 3.
And if you do plan on upgrading, those warnings are the least of your problems.
One of the biggest would be finding a Vue 3 compatible replacement for bootstrap-vue, with similar functionality. Current attempts are pale, particularly when comparing more complex components, such as tables, dropdowns and form elements.

Notes:

the warning should only be visible in development and should not appear on production builds.
relevant issues: #6373, #6471,
a workaround the problem would be downgrading vue-router to 3.4.9. But I strongly advise against it. IMHO, you should use @^3 (latest stable 3.x version).
there are plans for making bootstrap-vue Vue 3 compatible, but they are currently stalled by Russia's invasion in Ukraine