18. The routing nesting

1. new directory in the directory components User, and two new components AddUser.vue directory UserList.vue

AddUser.vue

<template>
    <div>
        <h2>{{msg}}</h2>
    </div>
</template>
<script>

export default {
  name: 'home',  
  data () {
    return {
        msg:'增加用户'
    }
  },
  methods:{   
      
  },
  components:{
  }
}
</script>
<style lang="scss" scoped>

</style>

UserList.vue

<template>
    <div>
        <h2>{{msg}}</h2>
    </div>
</template>
<script>

export default {
  name: 'home',  
  data () {
    return {
        msg:'用户列表'
    }
  },
  methods:{   
  },
  components:{
  }
}
</script>
<style lang="scss" scoped>

</style>

2. main.js introduction assembly, and a nested route

main.js

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

import VueResource from 'vue-resource';
Vue.use(VueResource)


import VueRouter from 'vue-router';
Vue.use(VueRouter)

// 1.创建组件，导入组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import vContent from './components/vContent.vue';
import Good from './components/Goods.vue';

import User from './components/User.vue';
import AddUser from './components/User/AddUser.vue'; 
Import from the UserList './components/User/UserList.vue' ; 

// 2. configure routing 
const routes = [ 
  　　{path: '/ Home' , Component: Home}, 
  　　{path: '/ News' , Component: News }, 
      {path: '/ vcontent /: AID', Component: vContent}, // dynamic routing 
      {path: '*', the redirect: '/ Home'}, // default route goto 
      {path: '/ Goods' , Component: Good}, 

      { 
        path: '/ User' , 
        Component: the User, 
        Children: [ 
          {path: 'the adduser' , Component: the AddUser},
          {path:'UserList' , Component: the UserList} 
        ] 
      }, 
     
] 
// note that this is routes, rather than Routers 

// 3. Examples of VueRouter 
const = Router new new VueRouter ({ 
      MODE: 'history', // the hash to history mode 
  　　routes // (abbreviation) corresponds Routers: Routers 
}) 

// 4. mount 
new new Vue ({ 
  EL: '#app' , 
  Router, 
  the render: H => H (the App) 
}) 

// 5. the the <router -view> </ router-view> placed inside App.vue

3. introducing <router-view> </ router-view> in the User.vue

user.vue

<template>
    <div>
        <div class="user">
            <div class="left">
                <ul>
                    <li><router-link to="/user/adduser">增加用户</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 {
  name: 'home',  
  data () {
    return {
        msg:'用户中心'
    }
  },
  methods:{   
  },
  components:{
  }
}
</script>
<style lang="scss" scoped>
.user{
    display: flex;
    .left{
        width:200px;
        min-height: 400px;
        border-right: 1px solid #eee;
    }
    .right{
        flex: 1;
    }
}
</style>