Vue实战开发--后台管理系统Vue+Element ui（4）

第四节会将Home.vue文件重新命名为Main.vue文件，本节涉及新的home目录和User目录下的index.js文件，因为侧边导航栏Aside和顶部Header是在每一个页面都存在的，所以重新命名为Main，而home文件夹下的index.js则对应系统首页。

1.添加el-menu样式

更改CommonAside.vue的style标签，这里引入less，为侧边导航栏加上高度，去除边框，调整h3标签。

//CommonAside.vue的style标签

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
// 这里h3是less的语法规范，需要引入，scoped表是只在该组件中使用样式,less语法中，h3标签不用加点，class才要。
.el-menu {
  height: 100%;
  border: none;
  h3 {
    color: rgb(255, 255, 255);
    text-align: center;
    line-height: 48px;
  }
}
</style>

更改CommonAside.vue的el-menu标签里的样式，注意！！！这里添加的样式并不是真正意义上的样式，不能写在style标签中，这里 background-color、 text-color、active-text-color是Element ui为el-menu设置的属性。所以需要以属性的方式写样式。

  <el-menu
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    default-active="1-4-1"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
    

el-menu的属性表，三者分别表示背景颜色、文必颜色、文本被选中颜色。

 左侧导航栏此时左侧仍然有白边，这是由于html、body标签自带的样式，我们覆盖即可。在App.vue中添加样式。

html,body{
  margin: 0;
  padding: 0;
}

 页面效果如下

 

 

 2.将Home.vue重命名为Main.vue，控制Main页面路由切换

在CommonAside.vue中的el-menu-item添加点击事件，clickMenu，并传入item。

<el-menu-item
      @click="clickMenu(item)"
      v-for="item in noChildren"
      :index="item.path"
      :key="item.path"
    >

在methods中添加方法,因为我们在mian.js文件全局引入Vue.use(VueRouter)，所以此处可以使用函数式编程，使用router的push方法，通过name进行跳转。首页按钮应该对应home。

//在methods中添加

clickMenu(item){
      this.$router.push({
        name:item.name
      })
    }

将Home.vue改名为Main.vue。更改router文件夹下的index.js文件，更改路径，添加children属性，里面放路由，形成一个嵌套路由。children属性存放数组，放/目录下的/home和/user路径。

//router下的index.js的routes变量

const routes = [
    {
        path:'/',
        name:'Main',
        component:()=>import('../view/Main.vue'),
        children:[
            {
                path:'/home',
                name:'home',
                component:()=>import('../view/home')
            },
            {
                path:'/user',
                name:'user',
                component:()=>import('../view/User')
            }
        ]
    }
]

在view文件夹下新建home文件夹和User文件夹，在home文件夹下新建index.vue页面。

 将原本的User.vue放入User文件夹并改名为index.vue。在home文件夹下新建index.js。

home的index.vue

<template>
    <div>网上home页面</div>
</template>
<script>
    export default{
        name:'User',
        data(){
            return{}
        }
    }
</script>

User下的index.vue

<template>
    <div>网上User页面</div>
</template>
<script>
    export default{
        name:'User',
        data(){
            return{}
        }
    }
</script>

更改Main.vue下的el-mian标签内容，添加router-view标签，router-view标签可以展示指定路由的页面。

<el-main>
    <router-view></router-view>
</el-main>