Vue学习21----路由的嵌套

文档：https://router.vuejs.org/zh/guide/essentials/nested-routes.html
在：https://router.vuejs.org/zh/guide/essentials/navigation.html
的基础上实现

实现步骤：

1.配置路由

   {
      path: '/user',component: User,
      children:[
        { path: 'useradd', component: UserAdd },

        { path: 'userlist', component: Userlist }

      ]

    }

2.父路由里面配置子路由显示的地方

 <router-view></router-view>

下面是个例子：
效果图：

项目结构：

User.vue父路由
UserAdd.vue子路由
UserList.vue子路由
代码：
main.js

import Vue from 'vue';
import App from './App.vue';

/*路由的嵌套

  1.配置路由
   {
      path: '/user',component: User,
      children:[
        { path: 'useradd', component: UserAdd },

        { path: 'userlist', component: Userlist }

      ]

    }

  2.父路由里面配置子路由显示的地方   <router-view></router-view>
*/

import VueRouter from 'vue-router';

Vue.use(VueRouter);

//1.创建组件

import User from './components/User.vue';

import UserAdd from './components/User/UserAdd.vue';
import Userlist from './components/User/Userlist.vue';

//2.配置路由   注意：名字

const routes = [
  {
    path: '/user', component: User,
    children:[
      { path: 'useradd', component: UserAdd },
      { path: 'userlist', component: Userlist }
    ]
  },
]

//3.实例化VueRouter  注意：名字

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

//4、挂载路由

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})


//5 <router-view></router-view> 放在 App.vue(显示子路由的地方)

App.vue

<template>


  <div id="app">

    <header class="header">
      <!--默认显示 useradd -->
      <router-link to="/user/useradd">用户</router-link>

    </header>

    <hr>

    <router-view></router-view>

  </div>
</template>

<script>



  export default {
    data () {
      return {

        msg:'你好vue'
      }
    }

  }
</script>
<style lang="scss">

  .header{


    height:4.4rem;

    background:#000;

    color:#fff;

    line-height:4.4rem;

    text-align:center;

    a{
      color:#fff;

      padding:0 2rem

    }
  }
</style>

User.vue

<template>
  <!-- 所有的内容要被根节点包含起来 -->
  <div id="user">


    <div class="user">

      <div class="left">
        <ul>
          <li>
            <router-link to="/user/useradd"> 增加用户</router-link>
          </li>


          <li>
            <router-link to="/user/userlist"> 用户列表</router-link>
          </li>
        </ul>


      </div>

      <div class="right">

        <router-view></router-view>


      </div>


    </div>

  </div>
</template>


<script>
  export default {
    data() {
      return {
        msg: '我是一个user组件'

      }
    }
  }

</script>

<style lang="scss" scoped>
  *{
    margin: 0px;
    padding-right: 0px;
  }
  .user {
    display: flex;
    .left {
      width: 120px;
      min-height: 400px;
      border-right: 1px solid #eee;
      background-color: antiquewhite;
      li {
        line-height: 2;
      }
    }
    .right {
      flex: 1;
    }
  }
</style>

UserAdd.vue

<template>
   
    <div id="adduser">    
        增加用户
    </div>
</template>

UserList.vue

<template>
   
    <div id="adduser">    
        用户列表
    </div>
</template>

源码下载：
vuedemo21
https://download.csdn.net/download/zhaihaohao1/11112020