Modifying old code to vue router 4 in vuejs

user_4536580 0
Viewed 13303

Before Vue Router 4, I had the following markup:

<router-link
              :disabled="!ICanGo(item)"
              :tag="!ICanGo(item) ? 'span' : 'a'"
              :event="ICanGo(item) ? 'click' : ''"
              :to="{ name: 'editUsuario', params: { id: item.id } }"
>{{ item.nome }}</router-link>

With Vue Router 4, I have the following warning now:

[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.

How could I change this code to Vue Router 4 recommendations?

vue-router vue.js javascript
2 Answers

Based on the docs for <router-link>'s v-slot, the equivalent in Vue Router 4 would be:

<router-link
  :to="{ name: 'editUsuario', params: { id: item.id } }"
  custom
  v-slot="{ href, navigate }"
>
  <span v-if="!ICanGo(item)">{{ item.nome }}</span>
  <a v-else :href="href" @click="navigate">{{ item.nome }}</a>
</router-link>

There's no need for disabling the element when !ICanGo(item) because the <span> itself has no link activation in that case.

demo

user_62771510

If you had a table for using its responsibility, instead of using this approach

  <div class="w-full overflow-x-auto">
      <table class="w-full">
        <tbody>
          <nuxt-link
            v-for="(item, index) in tableItems"
            :key="index"
            to="/somewhere"
            tag="tr"
            class="
              duration-300
              rounded
              whitespace-nowrap
              border-b-2 border-gray-200 border-transparent
              cursor-pointer
              hover:bg-gray-50
            "
            @click.native="doSomething"
          >
            <td class="py-2 w-1/3">
              <img src="~/assets/images/img.jpg" />
            </td>
            <td class="py-2 w-1/3">
              <p>Something 1</p>
            </td>
            <td class="py-2 w-1/3">
              <p>Something 2</p>
            </td>
          </nuxt-link>
        </tbody>
      </table>
    </div>

that will warn you, and if you do use the @tony19 approach might break line and ruin the responsibility of the table, instead of the @tony19 approach and above do like this:

<div class="w-full overflow-x-auto">
  <table class="w-full">
    <nuxt-link
      v-for="(item, index) in tableItems"
      :key="index"
      to="/somewhere-good"
      @click.native="doSomething"
    >
      <tbody>
        <tr
          class="
            duration-300
            rounded
            whitespace-nowrap
            border-b-2 border-gray-200 border-transparent
            cursor-pointer
            hover:bg-gray-50
          "
        >
          <td class="py-2 w-1/3">
            <img src="~/assets/images/img.jpg" />
          </td>
          <td class="py-2 w-1/3">
            <p>Something 1</p>
          </td>
          <td class="py-2 w-1/3">
            <p>Something 2</p>
          </td>
        </tr>
      </tbody>
    </nuxt-link>
  </table>
</div>

I did use nuxt.js tag link which is nuxt-link but it will be alright if you use router-link too, and as probably you know my element classes are tailwindcss

Note: remove .native if your click event did not work.

EDIT: it would be better to use the natural structure of the table without a or nuxt-link for navigating, and instead use router.push

user_140981510
Related