VueRouter的active-class，exact，exact-active-class三个属性的使用

 <router-link to="/news">唐诗</router-link>
    <router-link to="/news/exact/test" >test唐诗</router-link>
    <router-link to="/" exact>
      导航
    </router-link>
    <router-link to="/news/exact" >exact唐诗</router-link>
    <router-view/>

当点击 exact唐诗时

此时自身有两个class属性自身路径的自己也就是包含的路径有"/"和"/base/new"被赋予一个class属性
而"/base/news/exact/test"没有class属性因为他不是点击组件路径的子集

设置exact属性

<router-link to="/news" exact>唐诗</router-link>
    <router-link to="/news/exact/test" >test唐诗</router-link>
    <router-link to="/" >
      导航
    </router-link>
    <router-link to="/news/exact" >exact唐诗</router-link>
    <router-view/>

给唐诗设置属性exact，此时点击exact唐诗的时候其不会被赋予class属性

active-class和exact-active-class会修改默认class的名称

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/faker____/article/details/94552816
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-07 22:10:16
阅读 ( 1329 )
分类：前端

VueRouter的active-class，exact，exact-active-class三个属性的使用

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看