我有一个侧边栏项目,当我点击它时它是活动的。很明显,当我点击组件内的子链接时,我的活动类会关闭。如何防止这种情况?
我的侧边栏:
<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,
},
],
},
答案 0 :(得分:0)
在标题h1
下的子链接中添加了活动类。