在使用Vue-Cli写项目的时候,在需要改变路由样式是,一般我们就是利用router-link的router-link-exact-active和router-link-active这两个类。那么这两个类有什么区别呢?
1.router-link-exact-active
router-link-exact-active类名是当前路由在哪,则这个类名添加到哪个路由的对应标签上。比如当我to到或重定向到某个路由的时候,则router-link-exact-active类名会添加那个路由的a标签上。根据这个特性我们就可以通过给router-link-exact-active类添加样式达到我们修改被定向到的路由样式的目的。
2.router-link-active
为了满足当点击父路由时,父路由和子路由都被更改样式的目的,router-link-active类就登场了。比如/songtao这是一个父路由path设置并给该路由redirect到/songtao/ByteDance路径,当中有个子路由path设置为ByteDance,所以当我们点击跳转到/songtao时,会被重定向到/songtao/ByteDance路由。而router-link-active类名就会添加到父路由和子路由对应标签中。那么我们就可以通过给router-link-active类名样式达到同时更改父路由和当中子路由样式的目的。而router-link-exact-active类名只是被添加到了子路由上,因为我们redirect到/songtao/ByteDance路径上了。router-link-exact-active类名只会添加到当前路径下的路由上。
路径变化时,则相应类名添加或移除。