关于Vue的Router路由中，tag在4.x版本被移除，要求使用v-slot来移除警报的问题？

  • Z时代
  • 2024-03-03
  • 分类：IT

各位大佬，如题，router-link中使用tag属性出现警告，如何用v-slot方式移除警报啊？
关于Vue的Router路由中，tag在4.x版本被移除，要求使用v-slot来移除警报的问题？

回答：

官网上给的挺详细的可以看一下https://router.vuejs.org/zh/a...

<router-link
  to="/foo"
  custom
  v-slot="{ href, route, navigate, isActive, isExactActive }"
>
  <li
    :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
  >
    <a :href="href" @click="navigate">{{ route.fullPath }}</a>
  </li>
</router-link>
href：解析后的 URL。将会作为一个 <a> 元素的 href 属性。如果什么都没提供，则它会包含 base。
route：解析后的规范化的地址。
navigate：触发导航的函数。 会在必要时自动阻止事件，和 router-link 一样。例如：ctrl 或者 cmd + 点击仍然会被 navigate 忽略。
isActive：如果需要应用 active class，则为 true。允许应用一个任意的 class。
isExactActive：如果需要应用 exact active class，则为 true。允许应用一个任意的 class。

借用csdn上的例子https://blog.csdn.net/liu2506...
Vue Router3.1.0以下 以前

<router-link to="/about" tag="li">About Us</router-link>

Vue Router3.1.0以上 现在

<router-link to="/about" custom v-slot="{ navigate }">
  <li @click="navigate" @keypress.enter="navigate" role="link">About Us</li>
</router-link>

以上是 关于Vue的Router路由中，tag在4.x版本被移除，要求使用v-slot来移除警报的问题？ 的全部内容， 来源链接： utcz.com/p/937002.html

回到顶部