router-link补充(路由切换高亮等)

逃离我推掉我的手 2023-01-04 10:30 264阅读 0赞

我们知道`<router-link>`中，有一个属性`:to`，用于指定跳转的路径。  
`<router-link>`还有一些其他属性：

`tag:tag`可以指定`<router-link>`之后渲染成什么组件，比如下面的代码会被渲染成一个`<button>`元素，而不是`<a>`

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

**两个页面来回跳转，但是前进后退按钮是不可用的**  
![在这里插入图片描述][20210109164405954.png]  
`active-class:`当`<router-link>`对应的路由匹配成功时，会自动给当前元素设置一个`router-link-active`的class  
在进行高亮显示的导航菜单或者底部tabbar时，会使用到该类  
但通常不会修改类的属性，会直接使用默认的`router-link-active`即可  
![在这里插入图片描述][20210109164425107.png]

如果不想让这个自动添加的类名为`router-link-active`，可以设置`active-class`修改默认的名称

修改为active

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

或者在路由中修改配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxNjMwOQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20210109165004666.png]

[20210109164405954.png]: /images/20221119/51c791872aa545f6a4e891bce91501ac.png
[20210109164425107.png]: /images/20221119/b184f9f57ed142b393c9febd2199f1d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxNjMwOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021010916495638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxNjMwOQ==,size_16,color_FFFFFF,t_70
[20210109165004666.png]: https://img-blog.csdnimg.cn/20210109165004666.png