# 語法： ## 在上級路由里加children:[ ] ~~~ children:[ {path:'pay',component: Pay}, {path:'nopay',component: NoPay} ] ~~~   ## 代碼案例： ~~~ import Vue from 'vue' import VueRouter from 'vue-router' import Index from '../views/index' import Goods from '../views/Goods' import Detail from '../views/goods/Detail' import User from '../views/User' import Pay from "../views/user/Pay" //引入頁面 import NoPay from "../views/user/NoPay" //引入頁面 Vue.use(VueRouter) const routes = [ {path:'/', component:Index }, {path:'/goods', component:Goods }, { path:'/goods/detail/:id', component: Detail, }, {path:'/user', //欄目導航頁面 component:User, children:[ {path:'pay',component: Pay}, //嵌套路由 {path:'nopay',component: NoPay} //嵌套路由 ] } ] const router = new VueRouter({ routes }) export default router ~~~ 欄目頁里加載：  ## 代碼案例： ~~~ <template> <div> <ul class="user"> <router-link tag="li" to="/user/pay">已付款</router-link> <router-link tag="li" to="/user/nopay">未付款</router-link> </ul> <router-view></router-view> </div> </template> <script> export default { } </script> <style scoped> .user{ text-align: center; } .user li{ list-style:none; display:inline; margin:40px; } </style> ~~~