router-link标签在Vue router中是很常用的标签
下面我们来了解一下有关于他的属性
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
1.tag属性
to属性会将router-link渲染成a标签,但是如果我们想将router-link渲染成button等其他标签的时候我们该怎么做呢?
<router-link to="/home" tag="button">首页</router-link>
<router-link to="/about" tag="li">关于</router-link>
此时我们为第一个router-link标签赋予了tag="button"属性,第二个标签赋予了tag="li"属性,效果如下
2.replace属性
<router-link to="/home" tag="button" replace>首页</router-link>
<router-link to="/about" tag="li" replace>关于</router-link>
使用该属性在点击时会调用history.replaceState,所以浏览器前进后退无效
2.arctive-class属性
<button class="router-link-exact-active router-link-active">首页</button>
当我们进入浏览器点击按钮我们会发现该按钮自动添加了类名
那我们怎么才可以修改该类名呢?
<template>
<router-link to="/home" tag="button" replace active-class="active">首页</router-link>
</template>
<style>
.active {
color: #f00;
}
</style>
或者在路由与组件的应用关系中加入linkActiveclass:'active'