2021_AspiceAssessment_04_UIDevlopment_01_log_V01

Element plus 为导航栏菜单项，添加映射界面

<el-aside :width="isCollapse?'60px''200px'"> /*根据侧边栏是否展开，设置侧边栏宽度*/

Element plus 点击导航栏每个菜单项后，显示该界面主菜单

• Step 1. 导航菜单，路由属性设置为真

<el-menu router = "true">

• Step 2. 修改主界面样式

  .el-main {
    background-color: #E9EEF3;
  }

• Step 3. 主界面，设置为路由视图

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

• Step 4. 路由控制文件中，为该vue文件内路由项，添加子界面

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/main',
    name: 'Main',
    component: () => import('../views/Main.vue'),
    children:[ /*此行向下内容为添加内容*/
      {
        path: '/sys_2',
        name: 'sys_2',
        component: () => import('../views/Assessment/sys_2.vue') /*导航菜单项指向的页面*/
      }
    ]
  }
]

• Step 5. 添加一个vue文件

<template>
    <div>This is sys.2 page</div>
</template>
<script>
export default {
    name: 'sys_2'
}
</script>

<style scoped>

</style>

• Step 6 修改导航菜单项指向文件路径

<el-menu-item index="3-3-1" route="sys_2">SYS.2</el-menu-item>
<el-menu-item index="3-3-2" route="sys_3">SYS.3</el-menu-item>