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基礎教程