Question

我有一个侧边栏项目，当我点击它时它是活动的。很明显，当我点击组件内的子链接时，我的活动类会关闭。如何防止这种情况？

我的侧边栏：

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

Answer 1

在标题h1下的子链接中添加了活动类。

Vue.js：路由器链接的活动类

1 个答案: