javascript - Vue的nav，通过V-link跳转添加active的class怎么处理？

问题描述

问 题

li选中添加active样式

<ul class="nav">
            <li class="item" v-for=" init in inits">
                <a @click="changeTab($index)" track-by="$index" v-link="init.link" :class="{'active':tab.active}">
                    <i :class="init.klass"></i>{{ init.name }}
                </a>
            </li>
        </ul>

data() {
            return {
                currentView: vHomeNews,
                inits:[
                    {
                        name:'梦想学习地图',
                        link:'/',
                        klass:'nav-map',
                        iscur:true
                    },
                    {
                        name:'梦想实训营',
                        link:'/course/',
                        klass:'nav-training',
                        iscur:false
                    },
                    {
                        name:'梦想导师',
                        link:'/dreamTeacher/',
                        klass:'nav-teacher',
                        iscur:false
                    },
                    {
                        name:'我的',
                        link:'/mySet/',
                        klass:'nav-person',
                        iscur:false
                    }
                ]
            }
        },

li里的是我尝试的残余代码

解决方案

v-link="{path:init.link,activeClass: 'active',exact: true}"

这篇关于javascript - Vue的nav，通过V-link跳转添加active的class怎么处理？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！