Если элемент запускает действие, а не переход — сохраняет, удаляет, открывает модальное окно, — возьмите CdsButton. Кнопке тоже можно передать href или to, когда переход должен выглядеть кнопкой. Путь по иерархии разделов собирают CdsBreadcrumbs, а равнозначные разделы переключают CdsTabs.

Вариации

Текст ссылки

Проп text задаёт подпись строкой, слот default — произвольной разметкой, например текстом с иконкой. Слот приоритетнее пропа.

Sandbox Storybook

<script setup lang="ts">
import { CdsIcon, CdsLink } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsLink href="#" text="Текст из пропа text" />

    <CdsLink href="#">Контент из слота default</CdsLink>

    <CdsLink href="#">
      <CdsIcon icon="file-download" :size="16" start />
      Скачать спецификацию
    </CdsLink>
  </div>
</template>

Адрес

Проп href рендерит обычную ссылку. Атрибуты пишутся на компоненте как на теге a: target="_blank" открывает страницу в новой вкладке — пометьте такую ссылку иконкой, чтобы уход из приложения не был неожиданностью. Посещённые ссылки меняют цвет; якоря вида #section остаются прежними.

Sandbox Storybook

<script setup lang="ts">
import { CdsIcon, CdsLink } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-col items-center gap-3">
    <CdsLink href="https://www.b2b-center.ru" text="Открыть сайт b2b-center.ru" />

    <CdsLink href="https://www.b2b-center.ru" target="_blank" rel="noopener">
      Открыть в новой вкладке
      <CdsIcon icon="external-link" :size="16" end />
    </CdsLink>
  </div>
</template>

Маршрут приложения

Проп to принимает путь или объект маршрута vue-router: переход проходит без перезагрузки страницы, а на активном маршруте ссылка получает aria-current="page". Проп replace заменяет текущую запись в истории вместо новой — так возврат «назад» ведёт мимо промежуточного экрана. Проп exact считает маршрут активным только при полном совпадении, а не по префиксу.

<CdsLink to="/profile" text="Профиль" />
<CdsLink :to="{ name: 'order', params: { id } }" exact text="Заказ" />
<CdsLink to="/login" replace text="Войти" />

Отключённая ссылка

Проп disabled гасит цвет и снимает переход: компонент отменяет клик, проставляет aria-disabled и убирает ссылку из обхода по Tab. Рядом объясните, почему переход недоступен — само по себе серое состояние причину не называет.

Sandbox Storybook

<script setup lang="ts">
import { CdsLink } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <CdsLink href="https://www.b2b-center.ru" text="Доступная ссылка" />

    <CdsLink href="https://www.b2b-center.ru" disabled text="Недоступная ссылка" />
  </div>
</template>

Рекомендации

Storybook

Сценарии использования

Ссылка внутри текста

В абзаце ссылка занимает ровно ту фразу, которая называет цель перехода. Обработчик @click.prevent оставляет пользователя на странице и раскрывает подробности на месте, а href="mailto:…" открывает почтовый клиент.

Sandbox Storybook

<script setup lang="ts">
import { CdsLink } from '@central-design-system/components';
import { ref } from 'vue';

const expanded = ref(false);
</script>

<template>
  <div class="m-auto w-[420px] max-w-full">
    <p class="m-0">
      Заявка уходит на проверку сразу после отправки. Порядок рассмотрения описан в
      <CdsLink href="#" text="регламенте закупок" @click.prevent="expanded = !expanded" />, а вопросы принимает
      <CdsLink href="mailto:support@example.com" text="служба поддержки" />.
    </p>

    <p v-if="expanded" class="mt-3 mb-0">
      Заявку проверяют три рабочих дня. Если данных не хватает, вы получите письмо с уточнениями и дополните заявку без
      повторной подачи.
    </p>
  </div>
</template>

Список результатов

Заголовки найденных документов — ссылки: пользователь сканирует список глазами и открывает нужный. Текст берётся из пропа text, а обработчик click показывает выбранный документ, не покидая страницу.

Sandbox Storybook

<script setup lang="ts">
import { CdsLink, CdsTextInput } from '@central-design-system/components';
import { computed, ref } from 'vue';

const documents = [
  'Регламент закупок',
  'Договор поставки № 114',
  'Акт сверки за II квартал',
  'Спецификация оборудования',
  'Протокол разногласий'
];

const query = ref('');
const opened = ref<string | null>(null);

const results = computed(() =>
  documents.filter((title) => title.toLowerCase().includes(query.value.trim().toLowerCase()))
);
</script>

<template>
  <div class="m-auto flex w-[350px] max-w-full flex-col gap-2">
    <CdsTextInput v-model="query" label="Поиск по документам" placeholder="Введите название" clearable />

    <ul class="m-0 flex list-none flex-col gap-1 p-0">
      <li v-for="title in results" :key="title">
        <CdsLink href="#" :text="title" @click.prevent="opened = title" />
      </li>
      <li v-if="!results.length">Ничего не нашлось — измените запрос.</li>
    </ul>

    <p v-if="opened" class="m-0">Открыт документ «{{ opened }}».</p>
  </div>
</template>

Документы с ограниченным доступом

Список показывает все документы процедуры, но часть из них закрыта: disabled оставляет их названия видимыми и запрещает переход. Кнопка запроса доступа снимает ограничение — ссылки оживают без перезагрузки списка.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsLink } from '@central-design-system/components';
import { ref } from 'vue';

const documents = [
  { title: 'Извещение о закупке', restricted: false },
  { title: 'Техническое задание', restricted: false },
  { title: 'Смета проекта', restricted: true },
  { title: 'Протокол комиссии', restricted: true }
];

const granted = ref(false);
const requesting = ref(false);

function requestAccess() {
  requesting.value = true;

  setTimeout(() => {
    requesting.value = false;
    granted.value = true;
  }, 1000);
}
</script>

<template>
  <div class="m-auto flex w-[350px] max-w-full flex-col gap-2">
    <ul class="m-0 flex list-none flex-col gap-1 p-0">
      <li v-for="document in documents" :key="document.title">
        <CdsLink href="#" :disabled="document.restricted && !granted" :text="document.title" @click.prevent />
      </li>
    </ul>

    <template v-if="!granted">
      <p class="m-0">Смета и протокол открыты только участникам процедуры.</p>

      <CdsButton variant="soft" color="brand" text="Запросить доступ" :loading="requesting" @click="requestAccess" />
    </template>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
content	string | number | undefined	—	Контент, отображаемый в компоненте.
disabled	boolean | undefined	—	Отключает ссылку: навигация не выполняется, проставляются aria-disabled и tabindex=-1
exact	boolean | undefined	—	Если true, активное состояние будет применяться только при точном совпадении маршрута
href	string | undefined	—	Атрибут href для ссылки. Если указан, компонент будет вести себя как обычная ссылка
replace	boolean | undefined	—	Если true, навигация по маршруту будет заменять текущую запись в истории вместо добавления новой
text	string | number | undefined	—	Текст, отображаемый в компоненте.
theme	string | undefined	—	Тема компонента
to	LinkTo | undefined	—	Маршрут назначения или объект для RouterLink. Если указан, компонент будет вести себя как RouterLink

События

Имя	Тип	Описание
click	[e: MouseEvent]	Клик по ссылке

Слоты

Имя	Тип	Описание
default	any	Контент ссылки. Приоритетнее пропа text.