VueJS-即使显示路由器视图内容，如何突出显示侧边栏按钮 [英] VueJS - How to highlight the sidebar button even when displaying the router-view content

问题描述

你好，我要突出显示在侧边栏中单击的按钮.

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.

我有一个名为Blog.vue的组件，并且Blog按钮位于侧栏中.该Blog.vue中包含多张卡片，每张卡片都有一个徽章，因此，单击任何一个徽章时，它都会显示此处的相应内容路由更改.

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.

这是VerticalNavMenu.vue

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

这是navMenuItem.js:

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'
      },
      ...
    ]

这是router.js

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'),
        },

这是Blog.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>
       ...

这是InnerBlog.vue:

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.

推荐答案

最简单的方法是利用添加到<匹配目标路由的router-link> 组件，但是由于您没有使用它，可以使用以下技巧来完成:

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.

第二，您需要将类绑定添加到您的span元素，该元素将像这样渲染组标题:

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>

第三，您需要更改路线，单击博客"按钮时可用的每个徽章都应具有以/apps/blog-complete 开头的路线，例如

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'),
        },

第四，您将class is-active添加到样式部分:

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

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

这篇关于VueJS-即使显示路由器视图内容，如何突出显示侧边栏按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！