Link

Demos

Router link

Native link

<template>
<article>
  <section>
    <h4>Router link</h4>
    <div>
      <veui-link :to="{ name: 'components-icon' }">
        Previous
      </veui-link>
    </div>
  </section>
  <section>
    <h4>Native link</h4>
    <div>
      <veui-link
        native
        to="./pagination"
      >
        Next
      </veui-link>
    </div>
  </section>
</article>
</template>

<script>
import { Link } from 'veui'

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

API

Props

Name Type Default Description

ui

string

Style variants.

Value	Description
`primary`	Primary style.
`aux`	Auxiliary style.
`success`	Success style.
`warning`	Warning style.
`alert`	Alert style.

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