router-link使用详解

router-link组件的属性

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

属性介绍

1、to（必选参数）：类型是string/location

//字符串
<router-link to="path（路径）">AAAA</router-link>//对象
<router-link :to="{path:'路径'}">AAAA</router-link>

2、tag：类型string，它的默认值是a标签。
如果想要渲染成某种标签，例如

。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。
```
<router-link to='/' tag="li">跳转</router-link>
```
这里想举个例子提醒要注意的地方，当我们想给某个标签加上路由时，因为tag默认是a标签，所以路由下的字体颜色会发生改变，如果想要恢复原来的颜色就要加样式了，那有没有其他的方式呢？这时我们就可以用到tag了，我们可以用router-link来代替要加陆游的标签，如下
```
<router-link class="item border-bottom"v-for="item of list":key="item.id":to="'/detail/'+item.id"tag='li'><img class="mp-like-img" :src="item.imgUrl" alt="长沙生态动物园"><div class="item-info"><p class="item-title">{{item.title}}</p><p class="item-desc">{{item.desc}}</p><button class="item-button">查看详情</button></div></router-link>
```
这里原来最外层是一个li标签，但是加上路由后p标签字体颜色发生改变，此时我们就可以用路由的tag属性，将路由变为li标签，这就完美的解决这个问题。
3、active-class 类型: string 默认值: "router-link-active"设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。
```
 <router-link to='/'tag="a"active-class="red">AAA</router-link>
```
默认值通过路由的构造选项 linkActiveClass 来全局配置,如下示例：
```
export default new Router({mode:'router',linkActiveClass:'is-active',routes: [{path:'/router',component:home}
]
```
4、exact-active-class 类型: string 默认值: "router-link-exact-active"配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选linkExactActiveClass 进行全局配置的。
5、exact 类型: boolean 默认值: false按照这个规则，每个路由都会激活！想要链接使用 “exact 匹配模式”，则使用 exact 属性：
6、replace 类型: boolean 默认值: false
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
7、append 类型: boolean 默认值: false 设置 append 属性后，则在当前 (相对) 路径前添加基路径

router-link使用详解相关推荐

linux ln(link) 命令详解
linux ln(link) 命令详解功能说明:连接文件或目录. 语法:ln [-bdfinsv][-S <字尾备份字符串>][-V <备份方式>][--help][--v ...
【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下通常大家在使用 ...
【Vue路由（router）进一步详解】
Vue路由(router)进一步详解 query属性具体实例代码如下: params属性具体实例代码如下: props属性 replace属性编程式路由导航路由缓存具体代码: 总结本篇文章 ...
linux中的 ip addr 和 ip link命令详解
linux中的 ip addr 和 ip link命令详解一.ip addr命令我是使用的linux系统是redhat7.3,其它linux的相关操作大同小异(在这里不做赘述) 1.查看 (1). ...
LSA类型讲解——LSA-1【1类LSA——Router LSA】详解
目录一.LSA-1: (1)--简介: (2)--头部信息: (3)--数据部分: (4)--图解: (5)-- 案列(根据LSA-1画出拓扑图): 一.LSA-1: (1)--简介: 路由器LSA ...
【转】Linux ln(link) 命令详解
原文链接 http://blog.chinaunix.net/uid-25445243-id-3206874.html 功能:为某一个文件或目录在另外一个位置建立一个同步的链接,类似Windows下的 ...
angularjs指令中的compile与link函数详解
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...
vue router.beforeEach()，详解
router.beforeEach()一般用来做一些进入页面的限制.比如没有登录,就不能进入某些页面,只有登录了之后才有权限查看某些页面...说白了就是路由拦截. 第一步规定进入路由需不需要权限 @ ...
Vue Router系列之详解路由守卫
文章の目录 1.路由守卫是什么 2.导航守卫分类 2.1.全局守卫 2.1.1.全局前置守卫beforeEach 2.1.2.全局解析守卫beforeResolve(2.5.0 新增) 2.1.3.全 ...
loopback接口、router ID详解
目录 loop back接口简介: loopback接口应用: router id 简介: 选举规则: loop back接口简介: loopback接口是一种纯软件性质的虚拟接口.loopback接 ...

router-link使用详解

router-link组件的属性

属性介绍

router-link使用详解相关推荐

最新文章

热门文章