vue實現左側菜單切換，右側內容也切換

components中
    
    1.header.vue
    
    <template>
    <div class="header"></div>
    </template>
    
    <script>
    export default {
    name: 'header',
    data () {
    return {}
    }
    }
    </script>
    <style scoped>
    .header{
    height:100%;
    width: 100%;
    background: #eee;
    }
    </style>
    
    2.left.vue
    
    <template>
    <div id="leftBox">
    <ul class="side"> 
    <!-- :class="{active:index==ins}" -->
    <li v-for="(item,index) in LiList" :class="{active:index==ins}" :key='index' @click="UlClick(index,LiList)" :to="item.href">{{item.name}}</li>
    </ul>
    </div>
    </template>
    
    <script>
    
    export default {
    name: "left",
    props:["LiList"],
    data() {
    return {
    ins:0
    };
    },
    methods:{
    UlClick(index,LiList){
    this.$nextTick(() => {
    this.ins = index
    var e = e || window.event
    var target = e.target || e.srcElemen
    this.$emit("UlClick", {index,LiList});
    });
    }
    
    }
    };
    </script>
    
    <style scope>
    .leftBox{
    height: 100%;
    width: 100%;
    }
    .side{
    background: #999;
    }
    .side>li{ 
    line-height: 60px;
    border-bottom: 1px solid #fff;
    color: #fff;
    }
    .active{
    background: #fff;
    color: #000!important;
    }
    </style>
    
    3.footer.vue
    
    <template>
    <div class="footer">
    
    </div>
    </template>
    
    <script>
    export default {
    name: 'footer',
    data () {
    return { }
    }
    }
    </script>
    
    
    <style scoped>
    .footer{
    height:100%;
    width: 100%;
    background: #eee;
    }
    </style>
    
    page中：
    
    4.AllBox.vue
    
    <template>
    <div class="AllBox">
    <el-header>
    <Header></Header>
    </el-header>
    <el-container>
    <el-aside width="200px" style=" background: #999;">
    <Left :LiList='LiList' @UlClick="UlClick"></Left>
    </el-aside>
    <el-main>
    <router-view/>
    </el-main>
    </el-container>
    <el-footer>
    <Footer></Footer>
    </el-footer>
    </div>
    </template>
    
    <script>
    import Header from "../components/header";
    import Left from "../components/left";
    import Footer from "../components/footer";
    export default {
    name: "AllBox",
    components: {
    Header,
    Left,
    Footer
    },
    data() {
    return {
    LiList:[
    {
    name:'商品管理',
    id:0,
    href:'/list'
    },
    {
    name:'設備管理',
    id:1,
    href:'/shoping'
    },
    {
    name:'角色管理',
    id:2,
    href:'/role'
    },
    {
    name:'部門管理',
    id:3,
    href:'/depatment'
    },
    {
    name:'用戶管理',
    id:4,
    href:'/user'
    },
    ],
    };
    },
    methods:{
    UlClick(i){
    console.log(i)
    let list=i.LiList
    for(var a=0;a<list.length;a++){
    console.log(list[a])
    console.log(list[a].id)
    if(list[a].id==i.index){
    this.$router.push(list[a].href);
    }
    }
    }
    },
    mounted(){
    this.$router.push('/list');
    }
    };
    </script>
    
    
    <style scoped>
    .AllBox{
    height: 100%;
    width: 100%;
    }
    .el-header{
    height: 60px!important;
    padding: 0 0;
    }
    .el-footer{
    height: 60px!important;
    padding: 0 0;
    }
    .el-container{
    height:calc(100% - 60px - 60px);
    }
    </style>
    
    router文件中：
    
    5.index.js
    
    import Vue from 'vue'
    import Router from 'vue-router'
    import AllBox from '@/page/AllBox'
    import list from '@/page/list'
    import shoping from '@/page/shoping'
    import role from '@/page/role'
    import depatment from '@/page/depatment'
    import user from '@/page/user'
    
    Vue.use(Router)
    
    export default new Router({
    routes: [
    {
    path: '/',
    name: 'AllBox',
    component: AllBox,
    children:[
    {
    path: "list",
    name: "list",
    component: list,
    },
    {
    path: "shoping",
    name: "shoping",
    component: shoping,
    },
    {
    path: "role",
    name: "role",
    component: role,
    },
    {
    path: "depatment",
    name: "depatment",
    component: depatment,
    },
    {
    path: "user",
    name: "user",
    component: user,
    },
    ]
    }
    ]
    })複製代碼