多個router-view檢視巢狀：

1，除了app.vue中的router-view之外，還有其他的巢狀在router-view中的router-view檢視，子路由寫在router.js children中

app.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

Main.vue

<template>
<router-view/>
</template>
 

路由router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import User from './views/User.vue'
Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      children:[{
        path:'article',
        // 單個router-view用：component
        component: About
      }
      }]
    }
  ]
})
 

命名router-view 注意components不是component 

main.vue

<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

router.js  （預設的router-view是default，自己命名的就寫自己定義的名稱）

{
  path: '/settings',
  // 你也可以在頂級路由就配置命名檢視
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}