Router-Link详解

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

组件的属性有：

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 类名。

按照这个规则，每个路由都会激活！想要链接使用 “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
默认值: ‘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 属性后，则在当前 (相对) 路径前添加基路径

Router-Link详解相关推荐

React Router路由详解
React Router路由详解一.基础 1.安装使用 2.React Router 中通用的组件路由组件 BrowserRouter 和 HashRouter 路径匹配组件: Route 和 S ...
angular4和php,Angular4的router使用详解
这次给大家带来Angular4的router使用详解,Angular4的router使用注意事项有哪些,下面就是实战案例,一起来看一下. router,也就是路由,是前端中一个比较重要的概念.通过ro ...
loopback接口、router ID详解
目录 loop back接口简介: loopback接口应用: router id 简介: 选举规则: loop back接口简介: loopback接口是一种纯软件性质的虚拟接口.loopback接 ...
Smart Link详解及其配置
smart link相关概念和解释 smart link是什么?(华三.华为的私有协议) 如图所示,Switch A 通过 Switch B 和 Switch C 双上行到 Switch D. 1. ...
【vue】路由Router基础详解，带你快速入门~
什么是路由后端路由: 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源. 前端路由: 对于单页面应用程序来说,主要通过改变URL中的 hash(#) 来实现不同页 ...
[yc]详解link
[yc]详解link 详解link 有些人写C/C++(以下假定为C++)程序,对unresolved external link或者duplicated external simbol的错误信息不知 ...
InnoDB Cluster详解
目录一.InnoDB Cluster简介 1. 整体架构 2. MySQL Shell 3. MySQL Router 4. MySQL服务器集群二.创建InnoDB Cluster 1. 检查实 ...
25、react 中使用路由 router 详解
react 中使用路由 router 详解今天开始最新的一个模块,也是 react 开发中最重要的一部分,就是路由. SPA 理解我们使用原生的 HTML + CSS + JavaScript 开 ...
详解BLE 空中包格式—兼BLE Link layer协议解析
BLE有几种空中包格式?常见的PDU命令有哪些?PDU和MTU的区别是什么?DLE又是什么?BLE怎么实现重传的?BLE ACK机制原理是什么?希望这篇文章能帮你回答以上问题. 虽然BLE空中包(pa ...
linux ln(link) 命令详解
linux ln(link) 命令详解功能说明:连接文件或目录. 语法:ln [-bdfinsv][-S <字尾备份字符串>][-V <备份方式>][--help][--v ...

Router-Link详解

Router-Link详解相关推荐

最新文章

热门文章