指尖上的记忆指尖上的记忆
首页
  • 基础
  • Laravel框架
  • Symfony框架
  • 基础
  • Gin框架
  • 基础
  • Spring框架
  • 命令
  • Nginx
  • Ai
  • Deploy
  • Docker
  • K8s
  • Micro
  • RabbitMQ
  • Mysql
  • PostgreSsql
  • Redis
  • MongoDb
  • Html
  • Js
  • 前端
  • 后端
  • Git
  • 知识扫盲
  • Golang
🌟 gitHub
首页
  • 基础
  • Laravel框架
  • Symfony框架
  • 基础
  • Gin框架
  • 基础
  • Spring框架
  • 命令
  • Nginx
  • Ai
  • Deploy
  • Docker
  • K8s
  • Micro
  • RabbitMQ
  • Mysql
  • PostgreSsql
  • Redis
  • MongoDb
  • Html
  • Js
  • 前端
  • 后端
  • Git
  • 知识扫盲
  • Golang
🌟 gitHub

nuxt3使用动态路由的时候,遇到一个蛋疼的问题,如下:

navigateTo({
    name: "user-dashboard-event-series-edit-detail-id",
    params:{
      id: id
    }
  })
  
使用 nuxtlink的时候一直报错,后来发现 to 参数里也是需要 params的
<NuxtLink
      :to="{ name: 'user-dashboard-event-series-edit-detail-id'}"
      class="flex items-center gap-2 hover:text-color-link-bolder"
      :class="index === 0 ? 'font-semibold' : 'ml-5'"
    >
      <MIcon
        v-if="linkItem.icon"
        :name="linkItem.icon"
        size="sm"
      />
      <span class="text-sm transition-colors">
        {{ linkItem.name }}
      </span>
    </NuxtLink>
  
改为:
const route = useRoute()
const id = route.params.id

<NuxtLink
      :to="{ name: 'user-dashboard-event-series-edit-detail-id', params: { id: id }}"
      class="flex items-center gap-2 hover:text-color-link-bolder"
      :class="index === 0 ? 'font-semibold' : 'ml-5'"
    >
      <MIcon
        v-if="linkItem.icon"
        :name="linkItem.icon"
        size="sm"
      />
      <span class="text-sm transition-colors">
        {{ linkItem.name }}
      </span>
    </NuxtLink>
就不报错了