Home Vue.js: active class for router-link
Reply: 0

Vue.js: active class for router-link

user2409
1#
user2409 Published in June 23, 2018, 5:29 pm

I have a sidebar item which is active when I click on it. It is obvious that when I click on a sublink inside a component, my active class switches off. How to prevent this?

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>

My component (a page which will be opened when we click on the item in the sidebar):

<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>

Inside my page you can see its children. In the router.js it looks like this:

{
  path: '/sub',
  redirect: '/sub/success_tools_subscriptions',
},
{
  path: '/sub',
  component: MySubscriptionsPage,
  children: [
    {
      path: 'success_tools_subscriptions',
      component: MySuccessToolsSubscriptions,
    },
    {
      path: 'qa_subscriptions',
      component: MyQaSubscriptions,
    },
  ],
},
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.323145 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO