vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090

在vue2.0中,原来的v-link指令已经被<router-link>组件替代了

<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址,默认渲染为带有正确连接的<a>标签,可以通过配置tag属性生成别的标签。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的css类名

<router-link>组件的属性有:

to 、replace、 append、  tag、  active-class、 exact 、 event、  exact-active-class

1、to(必选参数):类型string/location

表示目标路由的链接,该值可以是一个字符串,也可以是动态绑定的描述目标位置的对象

如下几种示例

//下面是字符串的形式
<router-link to="home">Home</router-link>

//下面几种为动态绑定,v-bind: 可以简写为:

<router-link :to="'index'">Home</router-link>

/*但注意这个组件的导出需要有类似下面的代码
export default {
name: 'App',
data(){
return {
index:'/'
}
}
}
*/

<router-link :to="{ path: '/home' }">Home</router-link>
/*
这个路径就是路由中配置的路径
*/
<router-link :to="{ name: 'User'}">User</router-link>
/*
在路由的配置的时候,添加一个name属性,例如:
routes: [
{
path:'/home',
name:'User',
component:home
}
]
*/

2、tag

类型: string

默认值: "a"

如果想要 <router-link> 渲染成某种标签,例如 <li>。 于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航。

<router-link :to="'index'"
tag="li"
event="mouseover">Home
</router-link>
如果此时我们想要在这个li标签中添加a标签,如下所示,可以不为a标签添加href属性即可哦

<router-link :to="{name:'Home'}" tag="li">
<a>Home</a>
</router-link>
在这种情况下,<a> 将作为真实的链接 (它会获得正确的 href 的),而 "激活时的CSS类名" 则设置到外层的 <li>。

3、active-class

类型: string

默认值: "router-link-active"

设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

<router-link :to="{path:'/about'}"
active-class="activeClass"
>about</router-link>
默认值通过路由的构造选项 linkActiveClass 来全局配置,如下示例:

export default new Router({
mode:'history',
linkActiveClass:'is-active',
routes: [
{
path:'/about',
component:about
}
]
})
4、exact-active-class

类型: string

默认值: "router-link-exact-active"

配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。

5、exact

类型: boolean

默认值: false

"是否激活" 默认类名的依据是 inclusive match (全包含匹配)。 举个例子,如果当前的路径是 /a 开头的,那么 <router-link to="/a"> 也会被设置 CSS 类名。

按照这个规则,每个路由都会激活<router-link to="/">!想要链接使用 "exact 匹配模式",则使用 exact 属性:

<li><router-link to="/">全局匹配</router-link></li>
<li><router-link to="/" exact>严格匹配</router-link></li>
简单点说,第一个的话,如果地址是/aa,或/aa/bb,……都会匹配成功,

但加上exact,只有当地址是/时被匹配,其他都不会匹配成功

6、event
类型: string | Array<string>

默认值: 'click'

声明可以用来触发导航的事件。可以是一个字符串。

<router-link to="/document" event="mouseover">document</router-link>
如果我们不加event,那么默认情况下是当我们点击document的时候,跳转到相应的页面,但当我们加上event的时候,就可以改变触发导航的事件,比如鼠标移入事件

7、replace

类型: boolean

默认值: false

设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。

8、append

类型: boolean

默认值: false

设置 append 属性后,则在当前 (相对) 路径前添加基路径

参考文章:vue router
---------------------
作者:冰雪为融
来源:CSDN
原文:https://blog.csdn.net/lhjuejiang/article/details/81082090
版权声明:本文为博主原创文章,转载请附上博文链接!

vue2.0中router-link详解的更多相关文章

  1. Vue2.0学习--Vue数据通信详解

    一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...

  2. vue2.0之axios使用详解

    axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 htt ...

  3. Vue2.0学习——axios用法详解

    功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 自动转换 JSON 数据 客 ...

  4. vue2.0 中#$emit,$on的使用详解

    vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以 ...

  5. ALSA声卡驱动中的DAPM详解之七:dapm事件机制(dapm event)

    前面的六篇文章,我们已经讨论了dapm关于动态电源管理的有关知识,包括widget的创建和初始化,widget之间的连接以及widget的上下电顺序等等.本章我们准备讨论dapm框架中的另一个机制:事 ...

  6. ALSA声卡驱动中的DAPM详解之三:如何定义各种widget

    上一节中,介绍了DAPM框架中几个重要的数据结构:snd_soc_dapm_widget,snd_soc_dapm_path,snd_soc_dapm_route.其中snd_soc_dapm_pat ...

  7. js插件---videojs中文文档详解

    js插件---videojs中文文档详解 一.总结 一句话总结: js插件网上都有很多参考资料,使用起来也非常简单 二.lavarel中使用实例 <video id="example_ ...

  8. Vue2.0 中,“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?(转)

    https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...

  9. php中关于引用(&)详解

    php中关于引用(&)详解 php的引用(就是在变量或者函数.对象等前面加上&符号) 在PHP 中引用的意思是:不同的变量名访问同一个变量内容. 与C语言中的指针是有差别的.C语言中的 ...

随机推荐

  1. GitHub 搭建博客,出现 hexo g -d 报错

    想搭建一个个人博客,但是在将博客推送到Github上的时候在git bash 下运行hexo g -d命令出现错误: 错误如下:  fatal: HttpRequestException encoun ...

  2. python内存分析

    安装 首先安装memory_profiler和psutil pip install memory_profiler pip install psutil 在需要分析的函数前面添加装饰器@profile ...

  3. 输vim /etc/rc.d/init.d/mysqld 报错 …..localdomain.pid

    在安装MySQL的过程中出现以下错误: 本人解决方法是: ps aux | grep mysqld 罗列出所有关于mysqld的进程,然后把关于mysqld的进程都kill了.

  4. python基础--3 列表

    #list类#li是list类的一个对象li=[11,22,33,22,44] #参数#在原来值最后进行整个作为元素追加 # li.append((11,22,33))#对列表本身进行操作,appen ...

  5. $PMTargetFileDir 参数位置

    系统/session参数与变量参数和变量都配置在Session中,如$PMTargetFileDir.$PMBadFileDir等.这些变量有哪些.在哪里定义.是否可以修改呢?在控制台(Admin C ...

  6. head 显示文件头部内容

    1. 命令功能 head 默认显示文件前10行内容. 2.语法格式 head option file 参数说明 参数 参数说明 -n 指定显示行数 -c 指定显示的字节数 -v 总是显示文件名的文件头 ...

  7. 用python 写一个nagios插件 监控http内容(转载)

     nagios自带的http-check插件主要是检测地址url是否可以访问,在web+中间件的架构中容易出现url能访问,但是后台中间件拓机的情况,因为最近在自学python,所以写了个脚本检测ur ...

  8. spark与Hadoop的区别

    1. Mapreduce和Spark的相同和区别 两者都是用mr模型来进行并行计算 hadoop的一个作业:job job分为map task和reduce task,每个task都是在自己的进程中运 ...

  9. 对webpack的初步研究3

    Output配置output配置选项告诉webpack如何将编译后的文件写入磁盘.请注意,虽然可以有多个entry点,但只output指定了一个配置. A filename to use for th ...

  10. OPTIONS请求后台处理 跨域Filter

    import cn.hutool.http.Method; import org.springframework.web.filter.OncePerRequestFilter; import jav ...