Vue-router: Хлебные крошки и некорректное отображение пути маршрута в элементе

Question

Делая хлебные крошки, столкнулся с проблемой. Заключается она в том, что передаваемый путь route.path в динамический атрибут :href отличается от того, который применяется на элементе. Конкретное проявление проблемы описано в самом конце вопроса. Пожалуйста, смотрите код и читайте комментарии под ним. Заранее благодарю за любую помощь.

Шаблон:

<ul class="uk-breadcrumb">
    <li v-for="route in routes" :key="route.path">
        <router-link :to="{ path: route.path }" v-slot="{ navigate }" custom>
            <a :href="route.path" @click="navigate">{{ route.name }}</a>
        </router-link>
    </li>
</ul>

Компонент:

computed: {
    routes: function() {
        return this.$route.matched
    },
}

Роуты:

{
    path: '/',
    name: 'appname',
    ...
    children: [
        {
            path: 'blog',
            name: 'blog',
            ...
            children: [
                {
                    path: 'posts',
                    name: 'posts',
                    ...
                }
        }
    ]
}

Хлебные крошки, соответственно, отображаются на странице вот так:

appname   /   blog   /   posts

При распечатывании массива routes в таком виде:

for (var key in this.routes) {
    console.log(`path: ${this.routes[key].path}`)
}

В консоли получается вот такой результат:

path: 
path: /blog
path: /blog/posts

Эти же пути передаются и в :href, но итоговая ссылка первого элемента всегда соответствует последнему. То есть крошка "appname" имеет ссылку на "appname.loc/blog/posts", хотя получает пустой путь "". Я же ожидаю увидеть в ней ссылку на "appname.loc/". В чем может быть проблема?

Answer 1

Проверка состояние компонента через Vue-plugin для хрома показала, что ссылка в нём лежит верная, а именно:

path: ""

При этом элемент на странице отображается вот так:

<a href>appname</a>

То есть значение в href не подставлено. исправить ситуацию можно таким способом:

:href="route.path ? route.path : '/'"

Но тогда полученный пустой href никуда не приведет. Поэтому решение - указывать полную ссылку вот в таком виде:

:href="base_url + route.path"

computed: {
    base_url: function() {
        return window.location.origin
    }
}

БЛОГ НА HUSL

Vue-router: Хлебные крошки и некорректное отображение пути маршрута в элементе

Ответы (1 шт):