代码之家 › 专栏 › 技术社区 › Edgar Quintero

vue.js组件导航活动类仅在第二次单击时应用

vue-router vue-component routing vue.js javascript

Edgar Quintero · 技术社区 · 6 年前

我有一个菜单组件在一个视图中,这个视图是通过它自己的路径访问的(/它是如何工作的)。在这个视图中,我正在加载头组件,如下所示:

<nav class="nav">
    <ul class="top-menu">
        <li v-for="menu in menuItems" v-bind:key="menu.id" v-bind:class="{'active' : menu.active}" v-on:click="setActiveMenu(menu)">
            <router-link :to="menu.url">{{ menu.name }}</router-link>
        </li>
    </ul>
    <div class="get-started">
        <router-link to="/">Get Started</router-link>
    </div>
</nav>

问题是,每当我访问这条路线时,我可以证实 menu.active 是真的但是 active 类未触发。但是,如果我已经在/它是如何工作的路线内,那么它就应该工作,但只适用于该路线。在航线上航行似乎行不通。这个 setActiveMenu 函数如下:

setActiveMenu: function(menu) {
    for (let i = 0; i < this.menuItems.length; i++) {
        this.menuItems[i].active = false;
    }
    menu.active = true;
}

最后,菜单数组如下所示:

menuItems: [
    {
        name: 'How It Works',
        url: '/how-it-works',
        id: 1,
        active: false
    },
    {
        name: 'Page 2',
        url: '/',
        id: 2,
        active: false
    },
    {
        name: 'Page 3',
        url: '/',
        id: 3,
        active: false
    },
    {
        name: 'Page 4',
        url: '/',
        id: 4,
        active: false
    },
    {
        name: 'Page 5',
        url: '/',
        id: 5,
        active: false
    },
    {
        name: 'Page 6',
        url: '/',
        id: 6,
        active: false
    }
]

我猜我的问题要么是如何处理组件创建时的活动状态,要么是在路由之间导航的问题。什么是正确的方式来操纵头部?

1 回复 | 直到 6 年前

Edgar Quintero 6 年前

只是想出来了…我使用 created vue.js中内置的方法:

created() {
    for (let i = 0; i < this.menuItems.length; i++) {
        this.menuItems[i].active = false;
        if (this.menuItems[i].url === this.$router.currentRoute.path) {
            this.menuItems[i].active = true;
        }
    }
}

我还在想这是不是最好的办法?

推荐文章