在本文中，我们将介绍如何在Vue.js的vue-router中去除router-link中的下划线。

阅读更多：Vue.js 教程

Vue.js是一种用于构建用户界面的渐进式JavaScript框架。它通过使用组件化的开发方式，使开发者能够高效地构建复杂的Web应用程序。vue-router是Vue.js官方提供的路由管理器，用于实现SPA（单页面应用）的前端路由。

默认情况下，router-link组件在渲染时会包含一个下划线样式。然而，对于某些特定的设计需求，我们可能希望去除这个下划线，以使链接看起来更加美观或与整体设计风格一致。

有几种方法可以去除router-link中的下划线，在下面的示例中，我们将逐一介绍这些方法。

通过为router-link组件添加自定义的样式，我们可以实现去除下划线的效果。首先，在适当的位置添加以下CSS样式代码：

这将通过去除.router-link-active类的text-decoration属性来去除router-link的下划线。然后，在模板中使用router-link组件，并为其添加class属性：

在这个例子中，我们将router-link的class属性设置为router-link-active，以便应用自定义的样式。

另一种去除router-link下划线的方法是使用scoped CSS。首先，在你的Vue组件中，将样式代码放在标签中：

这将使样式只适用于当前组件的router-link。

使用全局样式是一个比较简单的方法，可以直接影响到所有的router-link组件。在你的CSS文件中，添加以下样式代码：

这样就能够去除所有router-link组件的下划线。

以下示例将通过使用方法一来去除router-link的下划线。首先，在一个新的Vue项目中，我们安装Vue Router：

然后，在main.js文件中，我们引入Vue Router并设置路由：

在上述代码中，我们定义了两个路由：'/'和'/about'。然后，我们在模板中使用router-link组件：

接下来，在CSS文件中添加自定义样式：

现在，我们可以在浏览器中查看结果。当我们点击链接时，可以看到链接上的下划线已经被成功去除。

在本文中，我们介绍了如何在Vue.js的vue-router中去除router-link组件的下划线。通过使用自定义样式、scoped CSS或全局样式，我们可以根据设计需求去除下划线，使链接看起来更加美观。希望本文对你有所帮助！