vue点击其它侧边栏收缩_vue点击侧边栏加载

Side.vue

export default {

data(){

return {

searchCriteria: &＃39;&＃39;,

breadcrumbItems: [&＃39;导航一&＃39;],

}

},

components: {

commonfooter

},

methods:{

handleIconClick(ev) {

console.log(ev);

},

handleSelect(key, keyPath){

switch(key){

case &＃39;1&＃39;:

this.$router.push(&＃39;/Page1&＃39;);

this.breadcrumbItems = [&＃39;导航一&＃39;]

break;

case &＃39;2&＃39;:

this.$router.push(&＃39;/Page2&＃39;)

this.breadcrumbItems = [&＃39;导航二&＃39;]

break;

case &＃39;3&＃39;:

this.$router.push(&＃39;/Page3&＃39;)

this.breadcrumbItems = [&＃39;导航三&＃39;]

break;

}

},

},

}

.el-footer {

background-color: #B3C0D1;

color: #333;

text-align: center;

line-height: 60px;

}

.el-container {

margin-bottom: 40px;

}

src/router/index.js

{

path: &＃39;/success&＃39;,//登录成功页面，根据需要自行修改

name: &＃39;Success&＃39;,

component: () => import(&＃39;../components/side/Side&＃39;),//Side.vue路径

redirect:"Page1",//重定向，第一次进入就进入Page1，不添加的话第一次进入右侧是空白

children:[

{

path: &＃39;/Page1&＃39;,

name: &＃39;Page1&＃39;,

component: () => import(&＃39;../components/Page1&＃39;)

},

{

path: &＃39;/Page2&＃39;,

name: &＃39;Page2&＃39;,

component: () => import(&＃39;../components/side/Page2&＃39;)

},

{

path: &＃39;/Page3&＃39;,

name: &＃39;Page3&＃39;,

component: () => import(&＃39;../components/side/Page3&＃39;)

}

]

}

Page2.vue(其他两个.vue文件自行设定)

export default {

data(){

return {}

}

}