如何使用 Vue 设置活动菜单选项

Question

我有一个两列布局。左栏有一个堆叠菜单，当用户选择一个选项时，内容显示在右侧。在所选菜单链接上设置 active 类的最佳方法是什么？

我在下面提出了一个解决方案，但它似乎有点冗长。每个菜单项都有一个以data.activeTab 为条件的类分配。点击事件处理程序更新data.activeTab 的值。

<template>
    <div>
        <div class="row">
            <div class="col-md-3">
                <ul class="nav nav-pills nav-stacked">
                    <li role="presentation" :class="{active : activeTab == 'option1'}">
                        <a :href="'/#/sales/' + uuid + '/option1'" @click="updateMenu">Option 1</a>
                    </li>
                    <li role="presentation" :class="{active : activeTab == 'option2'}">
                        <a :href="'/#/sales/' + uuid + '/option2'" @click="updateMenu">Option 2</a>
                    </li>
                </ul> 
            </div>
            <div class="col-md-9">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data : function () {
            return {
                activeTab : 'option1'
            }
        },
        props : [
            'uuid'
        ],
        methods : {
            updateMenu : function (event) {
                var str = event.target.toString();
                this.activeTab = str.substr(str.lastIndexOf('/') + 1);
            }
        }
    }
</script>

Answer 1

使用router-link 代替您的手动锚标记，并在您的router construction options 中设置linkActiveClass。

我看不到您的路线对象，因此这是根据您上面的内容的最佳猜测。请参阅我上面链接的路由器链接文档，以确定设置 to 属性的最佳方法。

<router-link tag="li" :to="{ path: 'sales', params: { uuid : uuid, option: "option1" }}">
    <a>Option 1</a>
</router-link>
<router-link tag="li" :to="{ path: 'sales', params: { uuid : uuid, option: "option2" }}>
    <a>Option 2</a>
</router-link>

然后，无论您在哪里初始化路由器，

new VueRouter({
    routes,
    linkActiveClass: "active"
});