<router-link> 是 Vue Router 提供的组件,用于创建导航链接。它可以将点击事件转换为路由导航,使用户能够在应用程序中进行页面之间的无刷新切换。
以下是 <router-link> 的使用方法:
- 导入 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 }
// ...
]
})
这仅是一个简单的示例,具体的路由配置根据你的应用程序需求而定。
- 使用
<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下划线的颜色
在<style scoped></style>中添加样式:
<style scoped>
.router-link-active {
text-decoration: none;
color: yellow;
}
a{
text-decoration: none;
color: #42b983;
}
</style>