11、Vue开发：路由激活样式、API调用与代码复用实践

浮生若梦622

于 2025-11-21 10:27:11 发布

阅读量7

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js实战六项目精讲文章标签： Vue 路由激活样式 fetch API

本文链接：https://blog.youkuaiyun.com/opencv7vision/article/details/155431820

21 篇文章 ¥499.90

订阅专栏¥69.90

在开发过程中，当路由处于激活状态时，对应的路由链接会添加激活类。默认情况下，组件会获得 router-link-active CSS类，我们可以通过以下步骤为激活链接添加底部边框样式：
1. 在 NavMenu.vue 组件中，使用Stylus声明作用域样式：

<style lang="stylus" scoped>
@import '../style/imports';
.router-link-active {
  border-bottom-color: $primary-color;
}
</style>

这里通过 @import '../style/imports'; 引入包含Stylus变量的 imports.styl 文件，使用 $primary-color 变量设置边框颜色。

不过，默认的激活类匹配行为是包含性的，这会导致一些问题。比如，当我们访问 FAQ 页面时， Home 和 FAQ 链接都会被高亮显示。这是因为 <router-link to="/"> 只要当前路径以 / 开头就会添加激活类，而所有路径都以 / 开头。 <