Vue中路由的嵌套

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

//引入公共的scss   注意：创建项目的时候必须用scss

import './assets/css/basic.scss';   

/*路由的嵌套

  1.配置路由
   {

      path: '/user',

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

        { path: 'userlist', component: Userlist }

      ]

    }

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

//请求数据

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 Content from './components/Content.vue';

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

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

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

const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News,name:'news' },

  {   

    path: '/user',

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

      { path: 'userlist', component: Userlist }

    ]

  },

  { path: '/content/:aid', component: Content },   /*动态路由*/

  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]

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

const router = new VueRouter({
  mode: 'history',   /*hash模式改为history*/
  routes // （缩写）相当于 routes: routes
})

//4、挂载路由

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

//5 <router-view></router-view> 放在 App.vue

<template>

  <div id="app"> 

    <header class="header">

      <router-link to="/home">首页</router-link>
      <router-link to="/news">新闻</router-link>

       <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>

<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>

    .user{

        display:flex;

        .left{

            width:200px;

            min-height:400px;

            border-right:1px solid #eee;

            li{

                line-height:2;
            }
        }

        .right{
            flex:1;
        }

    }
</style>

<template>

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