Vue router之router-link属性

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'