Nuxt3 路由器 - $route 未定义

Question

我建立了一个新的 Nuxt3 项目，但在使用 NuxtLink 组件导航到动态路由页面时遇到问题。

<template>
  <div>
    <div v-for="project in projects.projects">
        <NuxtLink :to="{ path: `/projects/${project.id}` }">{{project.text}}</NuxtLink>
    </div>
    <button @click="projects.addProject('Test Project', 'Director')">Add Project</button>
    </div>
</template>

<script>
import { useProjectsStore } from '@/store/projects.js'
export default {
  setup() {
    const projects = useProjectsStore()

    return { projects }
  },
}
</script>

在这段代码中，当我点击添加项目时，它创建了一个 NuxtLink 组件。当我单击 link 时，window 中的 URL 按预期更改为 /projects/0，但我在控制台中收到此错误并且页面内容未更新。

Uncaught (in promise) ReferenceError: $route is not defined at [id].vue:14:72

但是当我刷新页面时，直接转到 /projects/0 位置，加载正常，没有 $route is not defined 错误。

但是奇怪的是，如果我添加一个 NuxtLink 组件去 /projects/0 然后点击那个 link，而不是使用添加项目按钮创建 NuxtLink 组件，路由工作正常，没有错误。

这是[id].vue文件内容：

<template>
  <div>
      <h2>Single project</h2>
    <h1>{{project}}</h1>
  </div>
</template>

<script>
import { useProjectsStore } from '@/store/projects.js'

export default {
  setup() {
    const projects = useProjectsStore()
    const project = projects.projects.find((project) => project.id === $route.params.id)

console.log(project);
    return { project }
  },
}
</script>

Answer 1

您应该使用可组合函数 useRoute 在设置挂钩中获取路由实例：

export default {
  setup() {
    const projects = useProjectsStore()
    const route=useRoute()
    const project = projects.projects.find((project) => project.id === route.params.id)

console.log(project);
    return { project }
  },
}

Nuxt3 路由器 - $route 未定义

Nuxt3 Router - $route is not defined

vue.js

nuxt.js

vue-router

vuejs3

nuxtjs3