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;
}
 

 

posted @ 2021-07-22 15:53  骑蝴蝶飞  阅读(107)  评论(0编辑  收藏  举报