文章/答案/技术大牛

发布

社区首页 >问答首页 >在vuejs中将旧代码修改为vue路由器4

问在vuejs中将旧代码修改为vue路由器4
EN

Stack Overflow用户

提问于 2021-01-27 18:24:40

回答 2查看 14.1K关注 0票数 12

在Vue路由器4之前，我使用了以下标记：

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

对于Vue路由器4，我现在有以下警告：

[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路由器4建议？

vue-router

javascript

vue.js

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-01-27 20:04:57

根据v-slot，Vue路由器4中的等效内容是：

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

当!ICanGo(item)时，不需要禁用元素，因为在这种情况下，<span>本身没有链接激活。

演示

票数 13

Stack Overflow用户

发布于 2021-11-02 10:19:58

如果您有一个用于使用它的责任的表，而不是使用这种方法

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

这将警告您，如果您确实使用了@tony19方法，则可能会破坏表的责任，而不是@tony19方法和上面的方法，请这样做：

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

我确实使用了nuxt.js标记链接，这是nuxt-link，但是如果您也使用router-link，也可以，而且您可能知道我的元素类是tailwindcss。

注意:如果单击事件不起作用，则删除.native 。

编辑：使用表的自然结构进行导航，而不使用a或nuxt-link，而是使用router.push。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65925126

复制

相似问题

问在vuejs中将旧代码修改为vue路由器4
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在vuejs中将旧代码修改为vue路由器4EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在vuejs中将旧代码修改为vue路由器4
EN