RouterLink 组件 | Vue Router API

概述

RouterLink 是 Vue Router 提供的声明式导航组件，用于在模板中创建路由链接。它比传统的 <a> 标签更加强大，提供了激活状态管理、编程式导航等功能。

基本用法

基础链接

<template>
  <router-link to="/home">首页</router-link>
  <router-link to="/about">关于</router-link>
</template>

命名路由

<router-link :to="{ name: 'user-profile', params: { id: 123 } }">
  用户资料
</router-link>

带查询参数

<router-link :to="{ path: '/search', query: { q: 'vue' } }">
  搜索 Vue
</router-link>

组件属性

to - 目标路由

类型: string | RouteLocationRaw必需: 是

<!-- 字符串路径 -->
<router-link to="/home">首页</router-link>

<!-- 路由对象 -->
<router-link :to="{ name: 'home' }">首页</router-link>

<!-- 带参数 -->
<router-link :to="{ name: 'user', params: { id: user.id } }">
  {{ user.name }}
</router-link>

replace - 替换导航

类型: boolean默认: false

<router-link to="/login" replace>登录（不记录历史）</router-link>

custom - 自定义渲染

类型: boolean默认: false

<router-link to="/profile" custom v-slot="{ navigate, isActive }">
  <button @click="navigate" :class="{ active: isActive }">
    个人资料
  </button>
</router-link>

active-class - 激活类名

类型: string默认: 'router-link-active'

<router-link to="/home" active-class="active-link">
  首页
</router-link>

exact-active-class - 精确激活类名

类型: string默认: 'router-link-exact-active'

<router-link to="/user/123" exact-active-class="exact-active">
  用户详情
</router-link>

插槽用法

默认插槽

<router-link to="/about">
  <span class="icon">ℹ️</span>
  关于我们
</router-link>

作用域插槽

<router-link to="/dashboard" custom v-slot="{ href, route, navigate, isActive, isExactActive }">
  <a :href="href" @click="navigate" :class="{ active: isActive }">
    控制台 {{ isExactActive ? '(当前页面)' : '' }}
  </a>
</router-link>

实际应用场景

导航菜单

<template>
  <nav class="main-nav">
    <router-link 
      v-for="item in navItems" 
      :key="item.path"
      :to="item.path"
      :class="{ active: $route.path === item.path }"
    >
      {{ item.title }}
    </router-link>
  </nav>
</template>

<script setup>
const navItems = [
  { path: '/', title: '首页' },
  { path: '/about', title: '关于' },
  { path: '/contact', title: '联系' }
]
</script>

<style>
.main-nav a {
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}

.main-nav a.active {
  background-color: #007bff;
  color: white;
}
</style>

面包屑导航

<template>
  <nav class="breadcrumb">
    <router-link to="/">首页</router-link>
    <span class="separator">/</span>
    <router-link :to="parentPath">{{ parentTitle }}</router-link>
    <span class="separator">/</span>
    <span class="current">{{ currentTitle }}</span>
  </nav>
</template>

标签页导航

<template>
  <div class="tabs">
    <router-link 
      v-for="tab in tabs"
      :key="tab.name"
      :to="tab.route"
      custom
      v-slot="{ navigate, isActive }"
    >
      <button 
        @click="navigate"
        :class="['tab-button', { active: isActive }]"
      >
        {{ tab.label }}
      </button>
    </router-link>
  </div>
</template>

高级用法

动态激活样式

<template>
  <router-link 
    to="/user/123" 
    :class="[
      'user-link',
      { 
        'active': $route.params.id === '123',
        'premium': user.isPremium 
      }
    ]"
  >
    高级用户
  </router-link>
</template>

条件导航

<template>
  <router-link 
    v-if="hasPermission"
    to="/admin"
    class="admin-link"
  >
    管理后台
  </router-link>
  <span v-else class="no-permission">无权限</span>
</template>

自定义链接组件

<template>
  <router-link 
    to="/custom" 
    custom
    v-slot="{ href, navigate, isActive }"
  >
    <CustomButton 
      :href="href"
      @click="navigate"
      :active="isActive"
      label="自定义链接"
    />
  </router-link>
</template>

最佳实践

1. 使用命名路由

<!-- 不推荐 -->
<router-link to="/user/123">用户</router-link>

<!-- 推荐 -->
<router-link :to="{ name: 'user-profile', params: { id: 123 } }">
  用户资料
</router-link>

2. 合理的激活状态

/* 导航链接样式 */
.nav-link {
  transition: all 0.3s ease;
}

.nav-link.active {
  color: #007bff;
  border-bottom: 2px solid #007bff;
}

.nav-link:hover:not(.active) {
  color: #0056b3;
}

3. 可访问性考虑

<router-link 
  to="/important-page"
  aria-current="page"
  title="重要页面链接"
>
  重要页面
</router-link>

注意事项

1. to 属性绑定 - 使用 :to 绑定动态值
2. 激活状态 - 理解 active-class 和 exact-active-class 的区别
3. 性能优化 - 避免在大型列表中使用复杂的激活逻辑
4. SEO 友好 - 确保链接对搜索引擎友好

🎯 总结：RouterLink 组件提供了强大的声明式导航能力，通过合理使用其各种特性可以创建出用户体验优秀的单页应用导航系统。