vue router-link属性
router-link标签渲染出来是一个a标签
1.to属性,跳转
<router-link to="/home">首页</router-link>
2.tag属性,渲染成
<router-link to="/home" tag="button">首页</router-link>
<router-link to="/home" tag="li">首页</router-link>
3.如果main.js使用mode:history改成html5的history渲染模式,默认使用的是pustState,此时页面左上角箭头可以前进后退切换页面,想要修改成箭头不能用(具体参考之前笔记:前端请求页面不刷新博客),改成replace模式:
<router-link to="/home" tag="button" replace>首页</router-link>
4.点击的当前项变成红色:
(1)router-link里添加
<router-link to="/home" tag="button" replace active-class="active">首页</router-link>
.active{
color:#f00;
}
(2)index.js中添加linkActiveClass:'active'统一全部修改
const router = new VueRouter({
routes,
mode:history,
linkActiveClass:'active'
})
.active{
color:#f00;
}