router-link细节

曾经终败给现在 2023-01-15 03:40 70阅读 0赞

## router-link细节 ##

首先`router-link`在转换得时候会转换成一个`a`标签

> 如果不想用a链接可以使用tag属性将其变为你想要得标签上面得话我是变成一个li 标签  
> ![在这里插入图片描述][20210421134820741.png]

> 在这里我们要注意类名

![在这里插入图片描述][20210421135140761.png]  
active-class 是在我们选中时候得类名，可以修改样式，实现点击高亮，

> 但是由于我写的这个项目，我不小心把首页的的`tabbar`跟其他的写在一起了，并且给我的需求就是进入的时候就显示首页，所以我把首页的路由写成默认路由 ’/‘ ,导致我每点击他也会显示a这个类名

此刻我点击的是第三个li，如果你以a为样式类名的话，这样就会导致不论你点击那个第一个都会有高亮的效果，active-class 这个适用于你的首页显示不在tabbar里面，也就是你的tabbar里面没有 ‘/’ 的路由（附加一句，a类名相当于图中的`router-link-active`只不过我们在使用active-class的时候他会用后面的类名替换`router-link-active` 记住是替换）  
![在这里插入图片描述][20210421135727479.png]  
最后说一个精确匹配的效果  
在我们的`router-link`标签中什么也不用加，只是在类名中添加  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20210421140820768.png]

因为我把`router-link`tag 成了li  
添加一个`router-link-exact-active`的样式就可以了，因为只要你选中了，他就会自动给你添加这个类名，并且不受路由的影响，建议使用这种方法  
![在这里插入图片描述][20210421141349868.png]  
最后提一个小bug 如果你在写router-link的时候没有写to的时候它里面的东西是不会帮你渲染出来的，也就是页面空白

最后如果帮你解决了困惑

觉得写的易懂的给个三连增加动力

[20210421134820741.png]: /images/20221022/87a9aebc60ba4057b786a3c168b622a4.png
[20210421135140761.png]: /images/20221022/657d6c4d3d9241f5ae6eb7208d42817a.png
[20210421135727479.png]: /images/20221022/542be440e49e4ff49334eac9cacaf6c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]: /images/20221022/a372f980d6e5437bb112fa013032dec3.png
[20210421140820768.png]: /images/20221022/38d1253f16e84f69acb670d678c45f09.png
[20210421141349868.png]: /images/20221022/9ddb450a6f4341ee8f91674811a39ab0.png