我们知道<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>
或者在路由中修改配置