router-link怎么用和如何改变自带下划线的颜色

203 阅读1分钟

<router-link> 是 Vue Router 提供的组件,用于创建导航链接。它可以将点击事件转换为路由导航,使用户能够在应用程序中进行页面之间的无刷新切换。

以下是 <router-link> 的使用方法:

  1. 导入 Vue Router 并配置路由:
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    // 配置路由路径和对应的组件
    { path: '/', component: Home },
    { path: '/about', component: About }
    // ...
  ]
})

这仅是一个简单的示例,具体的路由配置根据你的应用程序需求而定。

  1. 使用 <router-link> 创建导航链接:
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

to 属性用于指定要导航到的路径。你可以直接传递路径字符串,也可以传递一个包含路径和查询参数的对象。

<router-link> 会在渲染时生成一个 <a> 标签,并自动添加活动路由的 class。点击链接时,Vue Router 会根据指定的路径进行导航切换。

注意:<router-link> 只能在 Vue Router 配置的 <router-view> 组件内部使用。

希望这能帮助到你正确使用 <router-link> 组件。

如何改变router-link下划线的颜色

image.png


在<style scoped></style>中添加样式:
<style scoped>
.router-link-active {
  text-decoration: none;
  color: yellow;
}
a{
  text-decoration: none;
  color: #42b983;
}
</style>