export default {

data() {

return {

menus: [

{

name: "首页",

path: "/home",

children: [

{

name: "首页1",

path: "/home01"

},

{

name: "首页2",

path: "/home02"

}

]

},

{

name: "关于",

path: "/about",

children: [

{

name: "关于1",

path: "/about01"

},

{

name: "关于2",

path: "/about02"

},

{

name: "关于3",

path: "/about03"

}

]

},

{

name: "其他",

path: "/other",

children: [

{

name: "其他1",

path: "/other01"

},

{

name: "其他2",

path: "/other02"

},

{

name: "其他3",

path: "/other03"

}

]

}

],

curIndex: 0,

curSubIndex: 0,

};

},

methods: {

//一级菜单

menuHandle(index) {

let curMenu = this.menus[index];

this.$router.push(curMenu.path + curMenu.children[0].path);

this.curIndex = index;

this.curSubIndex = 0;

},

//二级菜单

subMenuHandle(index) {

this.curSubIndex = index;

let curMenu = this.menus[this.curIndex];

this.$router.push(curMenu.path + curMenu.children[index].path);

}

},

created() {

//刷新的时候菜单选中

let curPath = this.$route.path.split("/");

let curMenuIndex = this.menus.findIndex(item => {

return item.path.endsWith(curPath[1]);

})

this.curIndex = curMenuIndex;

let curMenu = this.menus[curMenuIndex];

let subMenuIndex = curMenu.children.findIndex(item => {

return item.path.endsWith(curPath[2]);

})

this.curSubIndex = subMenuIndex;

},

};

body {

margin: 0px;

padding: 0px;

}

ul,

ul li {

padding: 0px;

margin: 0px;

list-style: none;

}

.top-menu {

overflow: hidden;

border-bottom: 1px solid #ddd;

li {

float: left;

padding: 10px;

cursor: pointer;

}

li.active {

color: red;

}

}

.left-menu {

float: left;

width: 150px;

border-right: 1px solid #ddd;

height: calc(100vh - 42px);

li {

color: #494949;

text-decoration: none;

cursor: pointer;

}

li.active {

color: red;

}

}

.content {

margin-left: 150px;

padding: 10px;

}