Link

Demos

Router link

Native link (`ui="strong s"`)

External link

<template>
<article>
  <section>
    <h4>Router link</h4>
    <div>
      <veui-link :to="{ name: 'components-icon' }">
        Previous
      </veui-link>
    </div>
  </section>
  <section>
    <h4>Native link (<code>ui="strong s"</code>)</h4>
    <div>
      <veui-link
        ui="strong s"
        native
        to="./pagination"
      >
        Next
      </veui-link>
    </div>
  </section>
  <section>
    <h4>External link</h4>
    <div>
      <veui-link
        to="https://www.baidu.com/"
        target="_blank"
      >
        Baidu
      </veui-link>
    </div>
  </section>
</article>
</template>

<script>
import { Link } from 'veui'

export default {
  components: {
    'veui-link': Link
  }
}
</script>

<style lang="less" scoped>
h4 {
  margin-top: 0;
}

section:not(:last-child) {
  margin-bottom: 40px;
}
</style>

API

Props

Name Type Default Description

ui

string=

Style variants.

Value	Description
`strong`	Strong style.
`s`	Small.
`m`	Medium.

to string | Object - Denotes the target route of the link. When used with Vue Router, the value will be passed to a <router-link>'s to prop. Otherwise only string type is supported, and the value will output to the href attribute of an <a> element.

rel string - Specifies the relationship of the target object to the link object. Refer to MDN for more details.

target

string

Specifies where to display the linked content. Refer to MDN for more details.

When target has a value of _blank, a noopener token will be automatically added into rel (if not already exist) to enhance safety for free.

native boolean false Whether to enforce the use of native <a> element (instead of <router-link>).

fallback string 'span' Specifies the fallback element type when no to prop is specified.

disabled boolean= false Whether the link is disabled.

Slots

Name	Description
`default`	The content of the link.

Events

Name	Description
`click`	Triggered upon clicks when the `to` prop is falsy or the `native` prop is `true`. The callback parameter list is `(event)`, where the type of `event` is HTML's native `Event`.

Edit this page on GitHub