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 参数

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

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

Events

Event	Arguments	Description
`click`	原生点击事件	点击link触发

单个组件导入

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

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

例子

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

导出作为插件

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

导出名称	导出路径
`LinkPlugin`	`nly-adminlte-vue`

例子

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