码迷,mamicode.com
首页 > 其他好文 > 详细

vue+element 进入不同路由页面(二级页面),让相应的左侧菜单

时间:2018-12-12 23:44:43      阅读:289      评论:0      收藏:0      [点我收藏+]

标签:log   for   cal   leo   san   cti   页面   temp   ihe   


路由配置
{
path: ‘/finance‘,
name: ‘Finance‘,
meta: {
title: ‘财务‘
},
component: () =>
import(‘@/components/Finance‘),
redirect: ‘/finance/code/code‘,
children: [{
path: ‘/finance/code‘,
name: ‘financeindex‘,
meta: {
title: ‘税收配置‘
},
redirect: ‘/finance/code/code‘,
component: () =>
import(‘@/components/finance/financeindex‘),
children: [{
path: ‘/finance/code/code‘,
name: ‘FinanceCode‘,
hidden: false,
active:‘/finance/code‘, //这里是在左侧菜单显示并且需要选中的
meta: {
title: ‘税收编码(金税)‘
},
component: () =>
import(‘@/components/finance/code/Code‘),
},
{
path: ‘/finance/code/codeimportrecord‘, // 这个路由进入的界面是 税收编码(金税)的二级页面, 当进入这个页面的时候,需要菜单中的税收编码(金税)显示选中
    name: ‘FinanceCodeImportRecord‘,
hidden: true,
meta: {
title: ‘税收编码导入记录‘
  },
component: () =>
import(‘@/components/finance/code/CodeImportRecord‘),
},
{
path: ‘/finance/classcode/classcode‘,
name: ‘FinanceClassCode‘,
hidden: false,
active:‘/finance/classcode‘, //为了省事,只给需要在左侧显示的路由添加active属性
meta: {
title: ‘分类税收编码确认‘
},
component: () =>
import(‘@/components/finance/classCode/ClassCode‘),
},
]
}, ]


element

<template>
<div class="leftnav">
<!--<div class="" v-for="nav in navs">
<div class="LiHeader">
{{nav.name}}
</div>
<li v-for="item in nav.san">
{{item.name}}
</li>
</div>-->
<el-menu
style="text-align: left;"
:default-active=this.show // 这是的值是指与 el-menu-item中:index的值对应的那一天显示选中(正常情况就是一个页面一个路由,进入那个路由,对应的导航菜单需要选中)
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#282b33"
text-color="#bcbcbc"
active-text-color="#ffffff">
<div class="" v-for="(nav,index) in navs" :key="index" style="width: 200px;">
<div class="" style="color: #ffffff;height: 40px;line-height: 40px;padding-left: 20px;font-size: 16px;">
{{nav.meta.title}}
</div>
<el-menu-item @click="clickroute(item.path)" v-for="(item,index) in nav.children" v-if="!item.hidden" :key="index" :index="item.active"(这里原来是item.path) style="height: 40px;line-height: 40px;">{{item.meta.title}}</el-menu-item>
</div>

</el-menu>
</div>
</template>
<script>
js
 data() {
return {
navs:[],
show:null //初始化上面:default-active绑定的值
}
},
created() { //// 页面载入的时候,拿到url,用/拆开,然后拼起来前两个路径,并且赋值, 这个时候show对应的就是路由表中的 avtive,
let route=this.$route.path.split(‘/‘)
let vueRouter=this.$router.options.routes.filter(router=>{return router.path==‘/‘})[0].children
let filterVuerouter=vueRouter.filter(router=>{return ‘/‘+route[1] == router.path })
this.navs=filterVuerouter[0].children
console.log(this.navs)

let router =‘/‘+route[1]+‘/‘+route[2]
console.log(router)
this.show=router
// console.log(this.show)
},
mounted() {

},

vue+element 进入不同路由页面(二级页面),让相应的左侧菜单

标签:log   for   cal   leo   san   cti   页面   temp   ihe   

原文地址:https://www.cnblogs.com/C-dashazi/p/10111425.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!