﹝Jotting﹞ - Nuxt.js

嵌套路由 - 2018 / 01 / 08

資料結構

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

users.vue

<template>
  <section class="container">
    <div>
       {{message}}
       <hr>
       <nuxt-child/>
    </div>
  </section>
</template>

users/_id.vue

<script>
export default {
  validate ({ params }) {
    // Must be a number
    //判斷是否為數字
    return /^\d+$/.test(params.id)
  },
  asyncData ({ params, env, error }) {
    const user = {message: params.id}
    // if (!user) {
    //   return error({ message: 'User not found', statusCode: 404 })
    // }
    return user
  }
}
</script>

Note

父層Vue文件內增加用於顯示子視圖內容。
params.id取得值

Ref.

1. 嵌套路由
2. nuxt-child

---