複数のrouter-viewビューがネストされています.
1,appを除く.vueのrouter-viewのほかに、router-viewにネストされたrouter-viewビューがあり、サブルーティングはrouterに書かれています.js children中
app.vue

Main.vue

ルート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

  
User Settings
  
  
  

router.js(デフォルトのrouter-viewはdefaultで、自分で命名したものは自分で定義した名前を書きます)

{
  path: '/settings',
  //                 
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}