Динамический роутинг во Vue.js?

Question

На сайте есть линк Logo button

<router-link to="/">
   <b-navbar-brand class="mr-5">
       <img src="@/assets/images/icons/logo-icon.svg" alt="">
   </b-navbar-brand>
 </router-link>

Как реализловать логику - если мы находимся на адресу ('/tickets') тогда линк в кнопке 'ticketbus', во всех других случаях линк в кнопке должен быть на "/"

Answer 1

Прежде всего хотелось бы преложить использовать name впредь при навигации, если ваши роуты изменятся, name'ы вероятнее всего нет. К тому же name чаще всего будет короче чем ваш путь и по нему проще точно проверить текущее отображение

Прочитать подробнее можно в документации.

Что касается непосредственно вашего вопроса, можно создать computed link

link () {
    if (this.$route.path === "/tickets") {
        return "/ticketbus";
    } else {
        return "/";
    }
}

Теперь код вашего компонента будет выглядеть так:

<router-link :to="link">
    <b-navbar-brand class="mr-5">
        <img src="@/assets/images/icons/logo-icon.svg" alt="">
    </b-navbar-brand>
</router-link>

БЛОГ НА HUSL

Динамический роутинг во Vue.js?

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