vue嵌套命名視圖出錯(cuò)

我在學(xué)習(xí)嵌套命名視圖時(shí)寫(xiě)了個(gè)demo,但是用chrome瀏覽器打開(kāi)顯示找不到文件
圖片描述

下面是我的代碼vue-0.vue：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
  
<div id="app">
        <h1>Nested Named Views</h1>
        <router-view></router-view>
</div>
<script>
  const UserSettingsNav = {
    template: `
<div class="us__nav">
  <router-link to="/settings/emails">emails</router-link>
  <br>
  <router-link to="/settings/profile">profile</router-link>
</div>
`
}
const UserSettings = {
    template: `
<div class="us">
  <h2>User Settings</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>Email Subscriptions</h3>
</div>
  `
}

const UserProfile = {
    template: `
<div>
    <h3>Edit your profile</h3>
</div>
  `
}

const UserProfilePreview = {
    template: `
<div>
    <h3>Preview of your profile</h3>
</div>
  `
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/settings',
      // You could also have named views at tho top
      component: UserSettings,
      children: [{
          path: 'emails',
        component: UserEmailsSubscriptions
      }, {
          path: 'profile',
        components: {
            default: UserProfile,
          helper: UserProfilePreview
        }
      }]
    }
  ]
})

router.push('/settings/emails')

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

</script>
</body>
</html>

項(xiàng)目目錄也就很簡(jiǎn)單放那個(gè)文件而已
圖片描述

請(qǐng)問(wèn)：為什么會(huì)顯示找不到您的文件？我這哪里出錯(cuò)了？

回答

編輯回答