router-link其他属性

1.tag

指定router-link之后渲染成什么组件如渲染成button

  <router-link to="/home" tag="button" repalce>首页</router-link>  

2.repace

添加replace不会留下history记录，后退键返回不到上一级元素

3.active-class

点击事件会自定添加标签，可绑定标签名添加类属性来更改样式。

  <router-link to="/home" tag="button" repalce active-class="active">首页</router-link>  

因为这里active-class过长，所以我使用的是另一种方法

在router的index.js路由下新增 linkActiveClass:'active'

const router = new VueRouter({    //步骤3创建实例
  routes,                 //步骤4挂载路由映射
  mode:'history',
  linkActiveClass:'active'
})

页面样式在App.vue中新增

<style>
 .active{
   color:red
 }
</style>
​