vue.js - VueJS - How to highlight the sidebar button even when displaying the router-view content

Question

Hello I am highlighting the button which ever is clicked in the sidebar.

Here i am looking to highlight the button even if the router-view content is displayed. But currently below image is displayed if i am in router view content.

I have a component called Blog.vue, and the Blog button is placed in the sidebar. This Blog.vue contains several cards in it and each card has a badge, so when clicked any of the badge it displays that respective content here route changes.

Initially when the page loads or when clicked on Blog button in sidebar it is highlighted. But as soon as the user clicks any of the badge in any of the card then the Blog button is not highlighted shown in second image.

Here is the VerticalNavMenu.vue

 <vs-sidebar
          class="v-nav-menu items-no-padding"
          v-model="isVerticalNavMenuActive"
          ref="verticalNavMenu"
          default-index="-1"
          :click-not-close="clickNotClose"
          :reduce-not-rebound="reduceNotRebound"
          :parent="parent"
          :hiddenBackground="clickNotClose"
          :reduce="reduce"
          v-hammer:swipe="onMenuSwipe">
      <div @mouseenter="mouseEnter" @mouseleave="mouseLeave">

 <div @mouseenter="mouseEnter" @mouseleave="mouseLeave">

        <div class="shadow-bottom" v-show="showShadowBottom" />

        <!-- Menu Items -->
        <component :is="scrollbarTag" ref="verticalNavMenuPs" class="scroll-area-v-nav-menu pt-2" 
         :settings="settings" @ps-scroll-y="psSectionScroll" @scroll="psSectionScroll" :key="$vs.rtl">
          <template v-for="(item, index) in menuItemsUpdated">

            <!-- Group Header -->
            <span v-if="item.header && !verticalNavMenuItemsMin" class="navigation-header truncate" 
            :key="`header-${index}`">
              {{ $t(item.i18n) || item.header }}
            </span>
            <!-- /Group Header -->

            <template v-else-if="!item.header">

              <!-- Nav-Item -->
              <v-nav-menu-item
              ...
              </v-nav-menu-item>

              <!-- Nav-Group -->
              <template v-else>
                <v-nav-menu-group
                ...  
                />
              </template>
              <!-- /Nav-Group -->
            </template>
          </template>
        </component>
        <!-- /Menu Items -->
      </div>
      ..
      showShadowBottom: false
      ..
      psSectionScroll () {
          const scroll_el = this.$refs.verticalNavMenuPs.$el || this.$refs.verticalNavMenuPs
          this.showShadowBottom = scroll_el.scrollTop > 0
    },

Here is the navMenuItem.js:

 {
    header: 'Apps',
    icon: 'PackageIcon',
    i18n: 'Apps',
    items: [
      {
        url: '/apps/blog-complete',
        name: 'Blog',
        slug: 'blog-complete',
        icon: 'CpuIcon',
        i18n: 'Blog'
      },

      {
        url: '/apps/info-tech',
        name: 'Info Tech',
        slug: 'info-tech',
        icon: 'Icon'
        i18n: 'Info Tech'
      },
      ...
    ]

Here is the router.js

       {
          path: '/apps/blog-complete',
          name: 'app-blog-complete',
          component: () => import('@/views/apps/Blog.vue'),
        },
        {
          path: '/apps/inner-blog/:apiVal_id',  // Here for these router view contents i want to show the button highlighted.
          name: 'Inner',
          component: () => import('./views/apps/InnerBlog.vue'),
        },

Here is the Blog.vue:

       ...
       <div class="right">
           <b-badge @click="$router.push({name: 'Inner', params: {id: apiVal.id.toString() }})
           .catch(err => {})">Check Deep</b-badge>
       </div>
       ...

Here is the InnerBlog.vue:

       ...
       <div class="right">
           Welcome to my route :)
       </div>
       ...

Please do help me to highlight the Blog button in the sidebar even when it displays the router-view content.

question from:https://stackoverflow.com/questions/65943006/vuejs-how-to-highlight-the-sidebar-button-even-when-displaying-the-router-view

Answer 1

Easiest way to do this would be to utilize .router-link-active class which is added to the <router-link> component when its target route is matched, but since you are not using that it can be done using this trick:

First, add this to your methods:

methods: {
  subIsActive(input) {
    const paths = Array.isArray(input) ? input : [input]
    return paths.some(path => {
      return this.$route.path.indexOf(path) === 0 // current path starts with this path string
    })
  }
}

This function checks if the current path starts with whatever you passed to the function.

Second, you need to add class binding to your span element which is rendering group headers like this:

<span v-if="item.header && !verticalNavMenuItemsMin" class="navigation-header truncate" 
        :key="`header-${index}`" :class="{'is-active': subIsActive(item.url)}">
          {{ $t(item.i18n) || item.header }}
</span>

Third, you need to change your routes, every badge that is available when you click on the Blog button should have a route that starts with /apps/blog-complete, for example

        {
          path: '/apps/blog-complete/inner-blog/:apiVal_id',  // Here for these router view contents i want to show the button highlighted.
          name: 'Inner',
          component: () => import('./views/apps/InnerBlog.vue'),
        },

Fourth, you add class is-active to your style section:

 .is-active{
   background-color: red;
 }