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.
| ||||||||
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. | ||||||||
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 . |
Configs
Key | Type | Default | Description |
---|---|---|---|
link.routerLink | string | 'router-link' | The name of the link component used in route mode so that you can replace the default one with a Vue Router-compatible implementation in environments such as Nuxt.js. |