我建立了一個新的 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 組件。當我單擊該鏈接時，視窗中的 URL 按預期更改為 /projects/0，但我在控制臺中收到此錯誤并且頁面內容沒有更新。
Uncaught (in promise) ReferenceError: $route is not defined at [id].vue:14:72
但是當我重繪 頁面，直接進入該/projects/0位置時，它加載正常，沒有 $route is not defined 錯誤。
奇怪的是，如果我添加一個前往/projects/0并單擊該鏈接的 NuxtLink 組件，而不是使用“添加專案”按鈕創建 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>
uj5u.com熱心網友回復：
您應該使用可組合函式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 }
},
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/480687.html
標籤：Vue.js nuxt.js Vue路由器 Vuejs3 nuxtjs3