Динамический тег в компоненте vue 3

8 января 2021 г. 3:03

Для наглядности покажу на конкретном примере.

В SEO есть такое понятие, как циклические ссылки. Например, в меню обычно всегда размещают ссылки на разделы сайта вне зависимости, на какой странице мы находимся. Но если мы находимся на некоторой странице и url текущей страниц совпадает с url кого-то пункта меню, то такая ссылка становится циклической и для SEO это плохо (по крайней мере раньше так точно было).

Таким образом, при совпадении url лучше пункт меню не ссылкой делать тегом a, а использовать другой тег, например, span.

Во Vue есть специальная директива :is, значение которой и будет тегом при рендере:

<component :is="tag">Title</component>

При tag = 'span': <span>Title</span>
При tag = 'div': <div>Title</div>

В нашем примере меню можно построить так:

# Menu.vue
​​​<template>
  <MenuItem :url="'/'" :title="Главная" />
  <MenuItem :url="'/services/'" :title="Услуги" />
  <MenuItem :url="'/about/'" :title="О компании" />
</template>

<script>
    import {ref} from "vue";
    import MenuItem from "./MenuItem";

    export default {
        components: {MenuItem}
    }
</script>
# Menuitem.vue
​​​<template>
    <component :is="tag" :href="get_url()">{{ title }}</component>
</template>

<script>
    import {ref} from "vue";

    export default {
        props: {url, title}
        setup(props) {

            const tag = ref('a')

            if (window.location.href.value === props.url) tag.value = 'span'

            const get_url = () => tag.value === 'a' ? props.url : null

            return {get_url, tag}
        }
    }
</script>

В коде сначала объявляется переменная tag с начальным значением a (что соответствует html-тегу "Ссылка"). Если текущий url страницы (window.location.href.value) совпадает с url пункта меню, то, во-первых, значение tag меняется на span, а во-вторых, в href функция get_url() возвращает null.

Так, например, если текущий url равен /services/, то наше меню срендерится так:

<a href="/">Главная</a>
<span>Услуги</span>
<a href="/about/">О компании</a>

Обратите внимание, что если мы хотим убрать тег :href при совпадении url, то нужно возвращать именно null, а не пустую строку ''. Иначе при рендере вместо <span>Услуги</span> Vue отрендерит как <span href>Услуги</span>. В хроме в инструментах разработчика при просмотре кода можно увидеть что-то типа href (unknown).

Это весьма упрощённый пример. В директиве :is в качестве переменной можно указывать не только теги html, но и компоненты Vue.

В документации https://v3.vuejs.org/guide/component-basics.html#dynamic-components описывается использование директивы :is и показан пример. Для начинающих он может показаться сложноватым, поэтому надеюсь, что на более простом рассмотренном примере удалось лучше понять принцип работы :is

Оцените статью

0 из 5 (всего 0 оценок)

captcha
Отмеченные звёздочкой поля ( * ) являются обязательными для заполнения.

Спасибо за ваш отзыв!

После нажатия кнопки "Отправить" ваше сообщение будет доставлено мне на почту.

Автор статьи

Права на использование материала, расположенного на этой странице https://vivazzi.pro/it/dinamic-tag-vue-3/:

Разрешается копировать материал с указанием её автора и ссылки на оригинал без использования параметра rel="nofollow" в теге <a>. Использование:

Автор статьи: Мальцев Артём
Ссылка на статью: <a href="https://vivazzi.pro/it/dinamic-tag-vue-3/">https://vivazzi.pro/it/dinamic-tag-vue-3/</a>

Подробнее: Правила использования сайта

Комментариев: 0

Вы можете оставить комментарий как незарегистрированный пользователь.

Но зарегистрировавшись, вы сможете:

  • получать оповещения об ответах
  • просматривать свои комментарии
  • иметь возможность использовать все функции разработанных сервисов

Для комментрирования от своего имени, войдите или зарегистрируйтесь обычным способом или через социальные сети:

Отправить

На данный момент нет специального поиска, поэтому я предлагаю воспользоваться обычной поисковой системой, например, Google, добавив "vivazzi" после своего запроса.

Попробуйте

Выберите валюту для отображения денежных единиц