Vue.js 组件导航活动类仅适用于第二次点击

Posted 2023-02-23

【中文标题】Vue.js 组件导航活动类仅适用于第二次点击

【英文标题】：Vue.js component nav active class only applies on second click

【发布时间】：2018-11-21 00:03:21

【问题描述】：

我有一个位于视图内的菜单组件，该视图可通过它自己的路径 (/how-it-works) 访问。在此视图中，我正在加载如下所示的标题组件：

<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 类没有被触发。但是，如果我已经在 /how-it-works 路线内，那么它应该可以正常工作，但仅适用于该路线。跨路线导航似乎不起作用。 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
    
]

我猜我的问题要么是我如何处理组件创建时的活动状态，要么是在路由之间导航的一些问题。操作标头的正确方法是什么？

【问题讨论】：

如果这是为了显示哪个路由是活动的，也许使用built in activeClass 选项？ Also here.

【参考方案1】：

刚刚想通了。我没有添加点击事件，而是使用了 vue.js 中内置的 created 方法：

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;
        
    

我仍然想知道这是否是最好的方法？

【讨论】：

我认为这些代码不会解决您提到的问题。它只是在created()钩子中激活了一个<li>。