英文:
Why does useRouter() and router parameters not work in my Nuxt project
问题
以下是您提供的内容的翻译：
我在pages/products文件夹下有一个名为[id].vue的文件，其中的代码如下：
<template>
<div>
<p>Hello {{ id }}</p>
</div>
</template>
<script setup>
const { id } = useRoute().params
</script>
<style scoped>
</style>
因此，当我打开localhost:3000/products/123时，应该进入一个页面，上面写着"Hello 123"，但我却进入了一个404页面。我还没有得到代码中建议的useRoute函数，好像它不存在。我需要额外安装或添加它吗？
我的普通路由正常工作。
我按照这个教程进行操作：https://www.youtube.com/watch?v=QS8MwC8S4o8&list=PL4cUxeGkcC9haQlqdCQyYmL_27TesCGPC&index=5
我的nuxt.config.js配置如下：
export default {
// 全局页面头部配置：https://go.nuxtjs.dev/config-head
head: {
title: 'meineSeite',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// 全局CSS：https://go.nuxtjs.dev/config-css
css: [
],
// 渲染页面前运行的插件：https://go.nuxtjs.dev/config-plugins
plugins: [
],
// 自动导入组件：https://go.nuxtjs.dev/config-components
components: true,
// 用于开发和构建的模块（建议使用）：https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/typescript
'@nuxt/typescript-build',
// https://go.nuxtjs.dev/tailwindcss
'@nuxtjs/tailwindcss',
],
// 模块：https://go.nuxtjs.dev/config-modules
modules: [
],
// 构建配置：https://go.nuxtjs.dev/config-build
build: {
}
}
我的项目结构如下：
.nuxt
components
Main.vue
NuxtLogo.vue
node_modules
pages
products
[id].vue
index.vue
index.vue
static
store
.editorconfig
.gitignore
nuxt.config.js
package-lock.json
package.json
README.md
tsconfig.json
请注意，我已经忽略了您在提供的内容中要求不翻译的部分。
英文:
I have a file in pages/products called [id].vue and my code in it is
<template>
<div>
<p>Hello {{ id }}</p>
</div>
</template>
<script setup>
const { id } = useRoute().params
</script>
<style scoped>
</style>
So when I open localhost:3000/products/123 I should land on a page which says Hello 123 but I land on a 404 page instead.
I also doesnt get the useRoute function suggested in code as if it doesnt exist. Do I have to install/add it extra?
My normal routes work just fine.
I followed this tutorial
I followed this tutorial https://www.youtube.com/watch?v=QS8MwC8S4o8&list=PL4cUxeGkcC9haQlqdCQyYmL_27TesCGPC&index=5
My nuxt.config.js:
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'meineSeite',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/typescript
'@nuxt/typescript-build',
// https://go.nuxtjs.dev/tailwindcss
'@nuxtjs/tailwindcss',
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
],
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
}
}
my Projekt structure:
.nuxt
components
Main.vue
NuxtLogo.vue
nodemodules
pages
products
[id].vue
index.vue
index.vue
static
store
.editorconfig
.gitignore
nuxt.config.js
package-lock.json
package.json
README.md
tsconfig.json
答案1
得分: 0
这看起来有点像你正在使用 Nuxt 2，例如 buildModules 已经在 Nuxt 3 中不建议使用了。你需要升级到 Nuxt 3，以使用 useRoute 并遵循这个指南。
英文:
This looks a bit like you are using Nuxt 2, buildModules for example is deprecated in Nuxt 3. You have to update to Nuxt 3 for useRoute and to follow this guide.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论