如何使用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代替您的手动锚标记，然后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"
});