The road to the Vue（八、实战篇 )

一：路由嵌套 概念

路由嵌套又称子路由，在实际应用中,通常由多层嵌套的组件组合而成，同样的，URL中各段动态路径也按某种结构对应嵌套的各层组件,例如 （只改变局部的模板和样式）

路由嵌套demo：play demo

1、先在View视图层新建目录和文件

Profile.vue文件

<template>
  <h1>个人信息</h1>
</template>

<script>
    export default {
        name: "UserProfile"
    }
</script>

<style scoped>

</style>

List.vue文件

<template>
  <h1>用户列表</h1>
</template>

<script>
    export default {
        name: "UserList"
    }
</script>

<style scoped>

</style>

2、修改路由文件index.js

导入组件

在路由的index.js页编写嵌套路由 children

3、修改Main.vue

<template>
<div>
<el-container>
  <el-aside width=200px>
    <el-menu :default-openeds="['1']">
      <el-submenu index=1>
      <template slot=title><i class="el-icon-caret-right"></i>用户管理</template>
        <el-menu-item-group>
          <el-menu-item index="1-1">
            <router-link to=/user/profile>个人信息</router-link>
           </el-menu-item>
          <el-menu-item index=1-2>
            <router-link to=/user/list>用户列表</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index=2>
        <template slot=title> <i class="el-icon-caret-right"/> 内容管理 </template>
      <e1-menu-item-group>
      <el-menu-item index=2-1> 分类管理 </el-menu-item>
      <el-menu-item index=2-2> 内容列表 </el-menu-item>
      </e1-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>

  <el-container>
  <el-header style="text-align: right; font-size: 12px">
  <el-dropdown>
  <i  class="el-icon-setting" style="margin-right:15px" />
  <el-dropdown-menu slot=dropdown>
  <el-dropdown-item>个人信息</el-dropdown-item>
  <el-dropdown-item>退出登录 </el-dropdown-item>
  </el-dropdown-menu>
  </el-dropdown>
  </el-header>

    <el-main>
      <router-view/> <!--展示模板-->
    </el-main>

  </el-container>

</el-container>
</div>
</template>

<script>
  export default {
    name: "Main"
  }
</script>


<style>
  .el-header {
    background-color: #048bd1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

4、运行查看

在terminal控制台输入 npm run dev 运行编译

二：参数传递和重定向

1、在视图层传递数据 （修改Main.vue ）

注意 ： to需要双向绑定 ( : 等于v-bind )
to后面有参数的话需封装成一个对象进行传递
name只能传递组件名称

2、在路由中接收数据

在后面用 /:参数 进行接收

3、在视图层进行展示

注意所有的元素 不能直接放在根结点下

参数传递的另一种方式 (通过props解耦)

修改路由 index.js

Main.vue依旧

Profile.vue 修改

是同样的效果

三：重定向 redirect:

在Main.vue中新增 回到登录页选项

并在路由index.js中绑定 且 实现重定向 redirect

四：去掉URL中的#符号

五：错误会自动跳转至404页面

导入组件

配置路由