1. 用户模块实现

1.1 实现子级路由跳转

1.1.1 组件之间的关系图

1.1.2 路由语法说明

1. 商场 路由的跳转的关键字
2. 路由的填充位 在该位置展现路由.
3. 路由跳转规则
   

1.1.3 父子组件跳转

1. 路由填充位设定 在Home.vue中定义路由占位符.

  <!-- 定义主页面结构-->
      <el-main>
        <!-- 定义路由展现页面-->
        <router-view></router-view>
      </el-main>

2. 实现父子关系的路由映射. 通过children属性实现父子组件跳转功能.

const routes = [
  {path: '/', redirect: '/login'},
  {path: '/login', component: Login},
  {path: '/elementUI', component: ElementUI},
  {path: '/home', component: Home, children: [
    {path: '/user', component: User}
  ]}
]

页面效果: