router-link属性

1.to属性

用于指定跳转路径

2.tag属性

该属性用于指定router-link渲染成什么组件

<router-link to="/home" tag="button">Home</router-link> 

3.replace属性

该属性不会留下历史记录，因此指定replace的情况下，不能后退到上一条记录(直接写属性名即可，不用设置属性值)

<router-link to="/home" tag="button" replace>Home</router-link>|

4.active-class

当某个router-link被选中时，会自动给标签上添加class：router-link-exact-active和router-link-active

因此可以直接设置router-link-active的样式，用于设置点击后效果

.router-link-active {
  color: red;
}

借助active-class可以更改名字，比如设置active-class="active"，那么点击router-link标签时会添加router-link-exact-active和active的样式

<router-link to="/home" tag="button" replace active-class="active">Home</router-link>|

因此之后直接设置.active即可

如果希望将所有的router-link标签中active-class属性进行统一更改，可以在创建router时设置linkActiveClass属性

const router = new VueRouter({
  mode: 'history',
  routes,
  linkActiveClass: 'active'
})