Link

nly-link组件是一个用来代替标签的组件,支持普通href跳转,支持router-link跳转,也支持nuxt-link,可以匹配当前路由以实现自定义css类等。

总览

<nly-link>
    nly-link
</nly-link>

<!-- 总览.name -->
<!-- nly-link.vue -->

click

点击事件

<template>
    <nly-link @click="show">
        nly-link
    </nly-link>
</template>
<script>
    export default {
        methods: {
            show() {
                alert('click')
            }
        }
    }
</script>

<!-- click.name -->
<!-- nly-link.vue -->

active

激活状态

<nly-link active active-class="text-danger">
    nly-link
</nly-link>

<!-- active.name -->
<!-- nly-link.vue -->

disabled

禁用状态,阻止 link 跳转

注意 adminlte 并没有改变鼠标手势,请添加 style

<style lang="css">
    a.disabled {
        pointer-events: none;
    }
</style>
<template>
    <nly-link disabled href="/">
        nly-link
    </nly-link>
</template>

<!-- disabled.name -->
<!-- nly-link.vue -->

to

router-link rouer.push 跳转

<nly-link to="collapse">
    nly-link
</nly-link>

<!-- to.name -->
<!-- nly-link.vue -->

href

普通跳转,会刷新页面,传入#会默认阻止跳转

<nly-link href="docs">
    nly-link
</nly-link>

<!-- href.name -->
<!-- nly-link.vue -->

replace

router-link, router.replace()跳转

<nly-link replace>
    nly-link
</nly-link>

<!-- replace.name -->
<!-- nly-link.vue -->

append

将url添加到当前路由后面并跳转

<nly-link to="docs" append>
    nly-link
</nly-link>

<!-- append.name -->
<!-- nly-link.vue -->

target

跳转窗口,当前窗口,新窗口,父路由窗口等

<nly-link to="docs" target="_blank">
    _blank
</nly-link>

<nly-link to="docs" target="_parent">
    _parent
</nly-link>

<!-- target.name -->
<!-- nly-link.vue -->

组件参数

props (Click to sort Ascending)类型默认值描述
href
Stringnull普通 url 地址
rel
Stringnull设置 rel 属性
target
String'_self'link 的 target 属性,可选_blank,_self,_parent,_top,framename
active
Booleanfalse设置 true 处于激活状态
disabled
Booleanfalse禁用,设置true为禁用状态
to
String or Objectnull点击跳转的页面, 可以是路由对象或者字符串,以router-link router.push()跳转
append
Booleanfalserouter-link,需要使用 to 或者 href 这个 props,将需要跳转的 url 字符串添加到当前 url 的后面再跳转。设置 append=true,比如当前 http://localhost:8080/link,to='collapse',则会跳转到 http://localhost:8080/link/collapse
replace
Booleanfalserouter-link router.replace()跳转
event
String or Array'click'点击事件,尽量不要和to以及href同时使用,如果同时使用,点击事件和跳转会依次发生
active-class
String激活状态css类名
exact
Booleanfalserouter-link,设置true开启路由匹配模式
exact-active-class
String'active'exact为true的情况下,当路由匹配成功,会激活exactActiveClass。类似active-class,是一个自定义css类
router-tag
String'a'router-link 标签,通常建议不修改
no-prefetch
Booleanfalsenuxt-link

<nly-link> 会生成支持 <router-link> 或者 <nuxt-link> 的组件 (如果您使用了 Nuxt.js). 查看更多关于 router link (或者 nuxt link) 支持的 props, 请跳转 Router support 文档

EventArgumentsDescription
click
  1. 原生点击事件
点击link触发

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-link>NlyLinknly-adminlte-vue

例子

import { NlyLink } from 'nly-adminlte-vue'
Vue.component('nly-link', NlyLink)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
LinkPluginnly-adminlte-vue

例子

import { LinkPlugin } from 'nly-adminlte-vue'
Vue.use(LinkPlugin)