如何在 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";

@Component

export 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

更好、更干净的方法：&nbsp; <router-link v-if="type === 'internal' :to="link">&nbsp; &nbsp; <slot />&nbsp; </router-link>&nbsp; <a v-else :ref="link"> <slot /> </a>您可以v-if在根元素中使用，这样它就可以解决您的问题或者您可能只是错过了路径部分？&nbsp; <component&nbsp; &nbsp; :is="type === 'internal' ? 'router-link' : 'a'"&nbsp; &nbsp; :to="type === 'internal' ? { path: link } : null"&nbsp; &nbsp; :href="type !== 'internal' ? link : null"&nbsp; >&nbsp; &nbsp; <slot />&nbsp; </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;      }    }  }}您基本上可以根据插槽属性在组件内锚标记上添加任何属性，例如以某些方式导航，添加特殊类，具体取决于您的用例。