我们知道<router-link>
中,有一个属性:to
,用于指定跳转的路径。
<router-link>
还有一些其他属性:
tag:tag
可以指定<router-link>
之后渲染成什么组件,比如下面的代码会被渲染成一个<button>
元素,而不是<a>
<!--<router-link>默认会被渲染为a标签,这里的tag属性,让它渲染为button -->
<router-link to="/home" tag="button">首页</router-link>
replace:replace不会留下history记录,所以指定replace的情况下,后退键返回不能返回到上一个页面中
<router-link to="/home" tag="button" replace>首页</router-link>
<router-link to="/about" replace>关于</router-link>
两个页面来回跳转,但是前进后退按钮是不可用的
active-class:
当<router-link>
对应的路由匹配成功时,会自动给当前元素设置一个router-link-active
的class
在进行高亮显示的导航菜单或者底部tabbar时,会使用到该类
但通常不会修改类的属性,会直接使用默认的router-link-active
即可
![]() |
![]() |
如果不想让这个自动添加的类名为router-link-active
,可以设置active-class
修改默认的名称
修改为active
<router-link to="/home" tag="button" replace active-class="active">首页</router-link>
或者在路由中修改配置