/settings/emails                                       /settings/profile
+-----------------------------------+                  +------------------------------+
| UserSettings                      |                  | UserSettings                 |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
| |     +-------------------------+ |                  | |     +--------------------+ |
| |     |                         | |                  | |     | UserProfilePreview | |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
+-----------------------------------+                  +------------------------------+
 

• Nav 只是一個常規元件。
• UserSettings 是一個檢視元件。
• UserEmailsSubscriptions、UserProfile、UserProfilePreview 是巢狀的檢視元件。

注意：我們先忘記 HTML/CSS 具體的佈局的樣子，只專注在用到的元件上

UserSettings 元件的 <template> 部分應該是類似下面的這段程式碼：

<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>巢狀命名檢視</h1>
  <router-view></router-view>
</div>
 

const UserSettingsNav = {
  	template:'<div class="us__nav"><router-link to="/settings/emails">郵箱</router-link><br><router-link to="/settings/profile">介紹</router-link></div>'
  }
  const UserSettings = {
  	template:'<div class="us"><h2>使用者設定</h2><UserSettingsNav/><router-view class ="us__content"/><router-view name="helper" class="us__content us__content--helper"/></div>',
    components: { UserSettingsNav }
  }

  const UserEmailsSubscriptions = {
  	template:'<div><h3>電子郵件訂閱</h3></div>'
  }

  const UserProfile = {
  	template:'<div><h3>編輯您的個人資料</h3></div>'
  }

  const UserProfilePreview = {
  	template:'<div><h3>預覽您的個人資料</h3></div>'
  }

  const router = new VueRouter({
    mode: 'history',
    routes: [
      { path: '/settings',
        // 您還可以在Top-PoT上擁有命名檢視。
        component: UserSettings,
        children: [{
        	path: 'emails',
          component: UserEmailsSubscriptions
        }, {
        	path: 'profile',
          components: {
          	default: UserProfile,
            helper: UserProfilePreview
          }
        }]
      }
    ]
  })

   router.push('/settings/emails')

  new Vue({
  	router,
    el: '#app'
  })
 

.us {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header"
    "nav content"
    "nav helper"
    ;
}

h2 {
  grid-area: header;
}

.us__nav {
  grid-area: nav;
  border: 1px dotted;
  margin-right: .75rem;
  padding: .3rem;
}
.us__content {
  grid-area: content;
}
.us__content--helper {
  grid-area: helper;
}