Vue.js: активный класс для маршрутизатора-ссылки

У меня есть элемент боковой панели, который активен, когда я нажимаю на него. Очевидно, что когда я нажимаю на подссылку внутри компонента, мой активный класс отключается. Как предотвратить это?

Моя боковая панель:

<router-link to='/sub/success_tools_subscriptions'
             class="list-group-item justify-content-between g-brd-none list-group-item-action"
             active-class="active">
  <i class="icon-feed g-pos-rel g-top-1 g-mr-8"></i>
  My subscriptions
</router-link>

Мой компонент (страница, которая будет открываться, когда мы нажимаем на элемент в боковой панели):

<template>
<...>
        <profile-sidebar v-if="isMySubscriptionsPage" />
        <another-profile-sidebar v-else="" />
              <h1 class="g-mt-minus-10 g-font-stag-medium g-color-gray-dark-v2 g-mb-15">
                My subscriptions
              </h1>
                <div>
                  <router-link to="/sub/success_tools_subscriptions">Success Tools</router-link>
                </div>
                <div class="g-mx-10">|</div>
                <div>
                  <router-link to="/sub/qa_subscriptions">Questions and Answers</router-link>
                </div>
              </div>
              <router-view></router-view>
<...>
</template> 
<script>
import AuthLayout from '../components/layouts/AuthLayout';
import ProfileSidebar from '../components/profile/ProfileSidebar';
import AnotherProfileSidebar from  '../components/AnotherProfile/AnotherProfileSidebar';


export default {
  components: {
   ProfileSidebar,
   AnotherProfileSidebar,
 },
computed: {
  isMySubscriptionsPage() {
    return this.$route.path === '/sub/success_tools_subscriptions'
      || this.$route.path === '/sub/qa_subscriptions';
     },
    },
   };
</script>

Внутри моей страницы вы можете увидеть ее дочерние элементы. В router.js это выглядит так:

{
  path: '/sub',
  redirect: '/sub/success_tools_subscriptions',
},
{
  path: '/sub',
  component: MySubscriptionsPage,
  children: [
    {
      path: 'success_tools_subscriptions',
      component: MySuccessToolsSubscriptions,
    },
    {
      path: 'qa_subscriptions',
      component: MyQaSubscriptions,
    },
  ],
},

person Olga B    schedule 13.02.2018    source источник


Ответы (1)


Также добавлены активные классы в подссылки под заголовком h1.

person Olga B    schedule 14.02.2018