vue-router嵌套命名视图

/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;
}