I am facing an issue with my sidebar item becoming inactive when I click on a sublink inside a component. How can I prevent the active class from switching off?
Here is my sidebar:
<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>
This is my component (the page opened when clicking on the sidebar item):
<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>
The page has children defined in the router.js as follows:
{
path: '/sub',
redirect: '/sub/success_tools_subscriptions',
},
{
path: '/sub',
component: MySubscriptionsPage,
children: [
{
path: 'success_tools_subscriptions',
component: MySuccessToolsSubscriptions,
},
{
path: 'qa_subscriptions',
component: MyQaSubscriptions,
},
],
},