Vue导航菜单问题

[weixin_38050362]

我想通过调用一个方法来默认点击指定的菜单项 比如我点击确定按钮，就默认点击进入基础信息这个页面，请问应该怎么实现呢 image.png968×337 5.12 KB 代码： image.png963×175 10.2 KB menus: 我直接调用this.convertUrl(‘companyBase’);也没用

[weixin_38102527]

奇怪的问题，你使用vue-router在系统里进行页面间的导航，而不是调用点击事件实现。应该 this.$router.push(‘companyBase’)

[weixin_38053335]

我知道你的意思，直接跳转路由，这也是可以的，但是我想他能够有被点击了的效果，也就是变成了红色

[weixin_38092709]

不行的，没有反应 我用这种的刚开始点的那几下有效果，多点击几下就没用了 <el-tabs v-model=“activeName” @tab-click=“handleClick” stretch=“true”> <button @click=“exit” class=“tuichu”>注销登录 <el-menu :default-active="defaultActive" mode="vertical" router> <template v-for="(item , index) in menus"> <el-submenu v-if="item.items.length > 0" :index="item.url" :key="item.url"> <template slot="title"> <span slot="title">111{{langType === 'en'? item.name_en: item.name}}</span> </template> <el-menu-item v-for="child in item.items" :index="child.url" :key="child.url"> <span slot="title">333{{langType === 'en'? child.name_en: child.name}}</span> </el-menu-item> </el-submenu> <el-menu-item v-else :index="item.url" :key="item.url"> <span>222{{langType === 'en'? item.name_en: item.name}}</span> </el-menu-item> </template> </el-menu> <div class="page_right"> <div class="menuTitle" v-if=" $route.meta.title != '首页' "><i class="el-icon-menu"></i> {{$route.meta.title}}</div> <div :style="pageRightMainStyle" class="main-content"> <router-view></router-view> </div> </div> </div> export default { computed: { defaultActive() { return this.$route.path.replace('/', ''); }, }, methods: { handleClick(tab, event) { this.clickTabs(tab.name); }, clickTabs(index){ this.menus =[]; for(let i = 0; this.allMenu.length > i; i++){ if( index == this.allMenu[i].code ){ this.menus = this.allMenu[i].items; console.log("menus==="); console.log(this.menus); if( this.menus.length > 0 ){ this.$router.replace(this.menus[0].url);//默认选中第一项 } } } }, 

[weixin_38059951]

export default { computed: { defaultActive() { return this.$route.path.replace(’/’, ‘’); }, }, methods: { handleClick(tab, event) { this.clickTabs(tab.name); }, clickTabs(index){ this.menus =[]; for(let i = 0; this.allMenu.length > i; i++){ if( index == this.allMenu[i].code ){ this.menus = this.allMenu[i].items; console.log("menus==="); console.log(this.menus); if( this.menus.length > 0 ){ this.$router.replace(this.menus[0].url);//默认选中第一项 } } } }, image.png1124×287 12.7 KB

[weixin_38092066]

这还不简单 github.com JasonBai007/vue-seed/blob/master/src/components/SideBar.vue#L8 <!-- 左侧导航组件 --> <!-- 使用说明：<side-bar></side-bar> --> <template> <div id="sidebar-wrap" :class="{ collapsed: toggSiderBar }"> <h3 class="logo"> <span class="rythm twist1">{{toggSiderBar ? 'VUE': 'AUTO VUE'}}</span> </h3> <el-menu background-color="#324157" text-color="#ddd" :default-active="$route.path" :unique-opened="isUnique" :router="isRouter" mode="vertical" :collapse="toggSiderBar"> <template v-for="item in menu"> <el-submenu v-if="item.children.length !== 0" :index="item.router" :key="item.router"> <template slot="title"> <i :class="item.icon"></i> <span slot="title">{{langType === 'en'? item.name_en: item.name}}</span> </template> <el-menu-item v-for="child in item.children" :index="child.router" :key="child.router"> <i :class="child.icon"></i> <span slot="title">{{langType === 'en'? child.name_en: child.name}}</span> </el-menu-item> :default-active="$route.path"