router-link细节

router-link细节

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

<ul class="tabbar-ul">
        <router-link to='/' tag="li">网站首页</router-link>
        <router-link to='/Popular' tag="li" >热门动态</router-link>
        <router-link to='/Performan' tag="li">演出节目</router-link>
        <router-link to='/Myself' tag="li">联系我们</router-link>
</ul>

如果不想用a链接可以使用tag属性将其变为你想要得标签上面得话我是变成一个li 标签

在这里我们要注意类名

active-class 是在我们选中时候得类名，可以修改样式，实现点击高亮，

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

此刻我点击的是第三个li，如果你以a为样式类名的话，这样就会导致不论你点击那个第一个都会有高亮的效果，active-class 这个适用于你的首页显示不在tabbar里面，也就是你的tabbar里面没有 ‘/’ 的路由（附加一句，a类名相当于图中的router-link-active只不过我们在使用active-class的时候他会用后面的类名替换router-link-active 记住是替换）

最后说一个精确匹配的效果
在我们的router-link标签中什么也不用加，只是在类名中添加

因为我把router-linktag 成了li
添加一个router-link-exact-active的样式就可以了，因为只要你选中了，他就会自动给你添加这个类名，并且不受路由的影响，建议使用这种方法

最后提一个小bug 如果你在写router-link的时候没有写to的时候它里面的东西是不会帮你渲染出来的，也就是页面空白

最后如果帮你解决了困惑

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