Vue小白教程：路由配置（三）嵌套路由

1.配置路由

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

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

 <router-view></router-view>

main.js

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


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

import './assets/css/basic.scss';   
//请求数据
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

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>
    .user{
        display:flex;
        .left{
            width:200px;
            min-height:400px;
            border-right:1px solid #eee;
            li{
                line-height:2;
            }
        }
        .right{
            flex:1;
        }
    }
</style>

UserAdd.vue

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

UserList.vue

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

效果

点击“增加用户”和“用户列表”可以切换右侧子页面

注：教学内容出自视频教学IT营itying.com 大地老师Vue基础教程