如何在 Vue 中根据链接是外部还是内部动态渲染 <router-link> 或 <a>？

Question

<template>  <component    :is="type === 'internal' ? 'router-link' : 'a'"    :to="type === 'internal' ? link : null"    :href="type !== 'internal' ? link : null"  >    <slot />  </component></template><script>import { Component, Prop, Vue } from "vue-property-decorator";@Componentexport default class SiteLink extends Vue {  @Prop({    validator: (value: string) =>      ["external", "internal"].includes(value)  })  private readonly type!: string;  @Prop({ type: String })  private readonly link!: string;}</script>上面是一个 Vue 组件，它将在其中呈现一个链接。我已经删除了与问题无关的任何内容（即rel、target、class等）。理解- 我对 Vue Router 的理解是，<router-link to="/about">About</router-link>和<a href="/about">About</a>都会像<a href="/about">About</a>在 DOM 中一样渲染，不同之处在于<router-link>版本将为链接提供 SPA 功能（即不加载新页面，它动态渲染组件）。预期- 当 时type="internal"，它将呈现该<router-link>版本。当 时type="external"，它将渲染<a>版本。<site-link type="external" link="https://stackoverflow.com">Stack Overflow</site-link>Will render<a href="https://stackoverflow.com">Stack Overflow</a><site-link type="internal" link="/about">About</site-link>Will render<router-link to="/about">About</router-link>Which is then handle by VueRouter to render<a href="/about">About</a>实际- 当 时type="internal"， a<a>没有在 DOM 中渲染。 href当 时type="external"，它会按预期呈现。<site-link type="external" link="https://stackoverflow.com">Stack Overflow</site-link>Will render<a href="https://stackoverflow.com">Stack Overflow</a><site-link type="internal" link="/about">About</site-link>Will render<router-link to="/about">About</router-link>Which is then handle by VueRouter to render<a>About</a> <!-- Notice there is no href -->有什么想法可以实现我想要的吗？

Answer 1

更好、更干净的方法：

  <router-link v-if="type === 'internal' :to="link">

    <slot />

  </router-link>

  <a v-else :ref="link"> <slot /> </a>

您可以v-if在根元素中使用，这样它就可以解决您的问题

或者您可能只是错过了路径部分？

  <component

    :is="type === 'internal' ? 'router-link' : 'a'"

    :to="type === 'internal' ? { path: link } : null"

    :href="type !== 'internal' ? link : null"

  >

    <slot />

  </component>

Answer 2

官方文档包含现在如何执行此操作的示例。

• 扩展 RouterLink

他们的方法是创建一个处理外部链接的自定义模板。

Answer 3

...不同之处在于<router-link>版本将为链接提供 SPA 功能（即不加载新页面，它动态呈现组件）。

通过不加载新页面，我想您的意思是它不会重新加载页面。是的，事实并非如此，因为onclick处理程序实际上被分配给一个函数，该函数在将新条目推入历史堆栈时执行preventDefault（防止页面重定向）。

如果您查看API 参考<router-link>，您会发现最引人注目的事情是它active-class根据活动/当前路线在 es 之间切换。

因此，话虽这么说，您可以通过 ; 在默认插槽内进行动态nchor<a>渲染。因为此时，slot 属性将是一个已解析的 URL，然后您可以将其安全地绑定到 DOM属性。v-slothrefhref

---

编辑

添加了一个示例（未经测试）。

<router-link

  :to="link"

  v-slot="{ href, route, navigate, isActive, isExactActive }">

  <a

    :class="isActive ? 'your-custom-class' : 'anything'"

    :href="type !== 'internal' ? href : 'javascript:void(0);'"

    @click="customNavigate(navigate.bind($event))">

    <slot></slot>

  </a>

</router-link>

处理程序customNavigate可能类似于：

{

  methods: {

    customNavigate(navigate) {

      if (this.type === 'internal') {

        navigate();

        return false;

      }

    }

  }

}

您基本上可以根据插槽属性在组件内锚标记上添加任何属性，例如以某些方式导航，添加特殊类，具体取决于您的用例。