Не работает скрипт в роутах Vue.js?

Question

[Vladislav]

Не работает скрипт в роутах Vue.js, а именно если вешать сообытие клика на кнопку или чисто ссылку, класс добавляется, на роутах нет, в чем ошибка? подскажите?

<template>
    <header class="v-header header">
        <div class="container">
            <div class="header__logo">
      

            </div>
            <nav class="header__nav">
                <ul>
     
                    <li>
                        <router-link to="/">Обо мне</router-link>
                    </li>
                    <li>
                        <router-link to="/services" >Услуги</router-link>
                    </li>
                    <li>
                        <router-link to="/portfolio">Портфолио</router-link>
                    </li>
                    <li>
                        <router-link to="/feedback">Обратная связь</router-link>
                    </li>
                    <!-- <li><a href="" @click.prevent="color">Услуги2</a></li> -->
                </ul>
            </nav>
            <div class="header__burg">
                <span></span>
                <span></span>
            </div>
        </div>
        <!-- <h1 class="sithLord">I is Sith</h1> -->
    </header>
</template>

<script>
    export default {
        name: 'v-header',
 
        data() {
            return {}
        },
        methods: {
            // color() {
            //     document.querySelector(".sithLord").classList.add('red')
            //     }
        },
    }
</script>

Comments

[h4mpy]

а какая задача стоит? менять класс заголовка в зависимости от раздела?
можно повесить событие @click.native="color"
но это не лучший способ

можно сделать через навигационные хуки https://router.vuejs.org/ru/guide/advanced/navigat...
или отслеживание

watch: {
    $route(to, from) {
      ...
    }
  }

[Vladislav]

h4mpy, при смене темплейта будет простая анимация через opacity, то есть кликнул, например на меню Обратная связь и фэйдом происходит анимашка появления всего тэмплата, как это реализовать, класс уже заготовлен осталось только при клике меню добавлять его

[h4mpy]

можно сделать через стандартный transition
https://router.vuejs.org/ru/guide/advanced/transit...