16.嵌套路由

16.嵌套路由

​ 如上图，组件main下可以由多个组件如Profile、Post共同组成一个Vue界面。而不是一个组件代表一个页面，只能够给产生页面的跳转

多个组件共同组合为一个页面

代码示例

按照目录结构添加文件

list.vue

<!--一个普通的表示用户列表页面的视图组件-->
<template>
<h1>用户列表页</h1>
</template>

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

<style scoped>

</style>

profile.vue

<!-- 一个普通的表示用户个人信息的视图组件 -->
<template>
  <h1>个人信息</h1>
</template>

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

<style scoped>

</style>

main.vue （来自ElementUI）

<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-message"></i>用户管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">
              <router-link to="/user/profile">个人信息</router-link> <!--指向profile组件-->
            </el-menu-item>
            <el-menu-item index="1-2">
              <router-link to="/user/list">用户列表</router-link> <!--指向list组件-->
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>内容管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">分类管理</el-menu-item>
            <el-menu-item index="2-2">内容列表</el-menu-item>
          </el-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"></i>
          <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></router-view>  <!--显示组件,router-view的位置决定组件出现的位置-->
      </el-main>
    </el-container>
  </el-container>
</template>

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

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

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

main.js

import Vue from 'vue'
import App from './App'
import router from "./router"
//导入ElementUI 以及其 CSS(需要SaaS编辑器)
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(router);
Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  router,//路由配置
  render: h => h(App) //ElementUI配置
})

index.js(router)

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/main";
import UserList from '../views/user/list';
import UserProfile from '../views/user/profile'
import Login from '../views/Login'
Vue.use(Router);
Vue.use(Main);
Vue.use(UserList);
Vue.use(UserProfile);
export default new Router({
  routes:[
    {
      //正常路由
      path: '/main',
      component: Main,
      children:[ //main的子组件 ，子组件可以在main视图组件下共同组成一个完整的页面（模块化）
        {
          path:'/user/profile',	//main的子嵌套路由
          component : UserProfile
        },
        {
          path:'/user/list',	//main的子嵌套路由
          component:UserList
        }
      ]
    },
    {
      //嵌套路由
      path : '/login',
      component : Login
    }
  ]
})

如下例 ：当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome }

        // ...其他子路由
      ]
    }
  ]
})