5.Vueルーティングネスト

<script src="https://unpkg.com/vue/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
<div id="app">
  <h1>Hello App!h1>
  <p>
    <router-link to="/p1">page1router-link>
    <router-link to="/p2">page2router-link> 
  p>
  <router-view>router-view>
div>  

const p1 = {
  template: `  
    

      template page 1 
      

      page1-sub1
      page1-sub2 
      

      
    
    
  `
}
const p2 = { template: '
template page 2
' }
const s1 = { template: '
template sub 1
' }
const s2 = { template: '
template sub 2
' }

const routes = [
  { path: '/', component: p1 },
  { path: '/p1', component: p1, children:[
    { path: '', component: s1 },  //        /，''       
    { path: 'sub1', component: s1 },
    { path: 'sub2', component: s2 }
  ]},
  { path: '/p2', component: p2 }
]

const router = new VueRouter({
  routes // (  )     routes: routes
})

const app = new Vue({
  router
}).$mount('#app')