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

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

В 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