动态路由 - wangshengliang

动态路由，对应的结构如下

-| pages/
---| user/
-----| [id].vue

例如：

pages/user.vue

<template>
  <div>
    <h1>User</h1>
    <p>user index</p>
    <NuxtLink to="/user/1">用户1</NuxtLink>
    <NuxtLink to="/user/2">用户2</NuxtLink>
    <div>
      <NuxtPage />
    </div>
    <NuxtLink to="/">返回index</NuxtLink>
  </div>
</template>

pages/user/[id].vue

<template>
  <div>
    <h1>用户详情页</h1>
    <p>当前用户id为：{{ id }}</p>
  </div>
</template>

<script setup>
const route = useRoute()
const id = route.params.id
</script>

有些时候参数是可选的，这个时候可以再加一层中括号，例如：

pages/user.vue

<template>
  <div>
    <h1>User</h1>
    <p>user index</p>
    <NuxtLink to="/user/1">用户1</NuxtLink>
    <NuxtLink to="/user">无id用户</NuxtLink>
    <div>
      <NuxtPage />
    </div>
    <NuxtLink to="/">返回index</NuxtLink>
  </div>
</template>

pages/user/[[id]].vue

<template>
  <div>
    <h1>用户详情页</h1>
    <p v-if="id">当前用户id为：{{ id }}</p>
    <p v-else>无id用户</p>
  </div>
</template>

<script setup>
const route = useRoute()
const id = route.params.id
</script>

课堂练习

完成《用户管理系统》详情页

作业：完成用户新增和修改用户功能

-EOF-