为什么在我的Nuxt项目中useRouter()和路由参数不起作用

huangapple
go评论91阅读模式
英文:

Why does useRouter() and router parameters not work in my Nuxt project

问题

以下是您提供的内容的翻译：

我在pages/products文件夹下有一个名为[id].vue的文件，其中的代码如下：

  1. <template>
  2.     <div>
  3.         <p>Hello {{ id }}</p>
  4.     </div>
  5. </template>
  7. <script setup>
  8.     const { id } = useRoute().params
  9. </script>
  11. <style scoped>
  13. </style>

因此，当我打开localhost:3000/products/123时，应该进入一个页面，上面写着"Hello 123"，但我却进入了一个404页面。我还没有得到代码中建议的useRoute函数，好像它不存在。我需要额外安装或添加它吗？

我的普通路由正常工作。

我按照这个教程进行操作：https://www.youtube.com/watch?v=QS8MwC8S4o8&list=PL4cUxeGkcC9haQlqdCQyYmL_27TesCGPC&index=5

我的nuxt.config.js配置如下：

  1. export default {
  2.   // 全局页面头部配置：https://go.nuxtjs.dev/config-head
  3.   head: {
  4.     title: 'meineSeite',
  5.     htmlAttrs: {
  6.       lang: 'en'
  7.     },
  8.     meta: [
  9.       { charset: 'utf-8' },
  10.       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
  11.       { hid: 'description', name: 'description', content: '' },
  12.       { name: 'format-detection', content: 'telephone=no' }
  13.     ],
  14.     link: [
  15.       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  16.     ]
  17.   },
  19.   // 全局CSS：https://go.nuxtjs.dev/config-css
  20.   css: [
  21.   ],
  23.   // 渲染页面前运行的插件：https://go.nuxtjs.dev/config-plugins
  24.   plugins: [
  25.   ],
  27.   // 自动导入组件：https://go.nuxtjs.dev/config-components
  28.   components: true,
  30.   // 用于开发和构建的模块（建议使用）：https://go.nuxtjs.dev/config-modules
  31.   buildModules: [
  32.     // https://go.nuxtjs.dev/typescript
  33.     '@nuxt/typescript-build',
  34.     // https://go.nuxtjs.dev/tailwindcss
  35.     '@nuxtjs/tailwindcss',
  36.   ],
  38.   // 模块：https://go.nuxtjs.dev/config-modules
  39.   modules: [
  40.   ],
  42.   // 构建配置：https://go.nuxtjs.dev/config-build
  43.   build: {
  44.   }
  45. }

我的项目结构如下：

  1. .nuxt
  2. components
  3.     Main.vue
  4.     NuxtLogo.vue
  5. node_modules
  6. pages
  7.     products
  8.         [id].vue
  9.         index.vue
  10.     index.vue
  11. static
  12. store
  13. .editorconfig
  14. .gitignore
  15. nuxt.config.js
  16. package-lock.json
  17. package.json
  18. README.md
  19. tsconfig.json

请注意，我已经忽略了您在提供的内容中要求不翻译的部分。

英文:

I have a file in pages/products called [id].vue and my code in it is

  1. &lt;template&gt;
  2.     &lt;div&gt;
  3.         &lt;p&gt;Hello {{ id }}&lt;/p&gt;
  4.     &lt;/div&gt;
  5. &lt;/template&gt;
  7. &lt;script setup&gt;
  8.     const { id } = useRoute().params
  10. &lt;/script&gt;
  12. &lt;style  scoped&gt;
  14. &lt;/style&gt;

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&amp;list=PL4cUxeGkcC9haQlqdCQyYmL_27TesCGPC&amp;index=5

My nuxt.config.js:

  1. export default {
  2.   // Global page headers: https://go.nuxtjs.dev/config-head
  3.   head: {
  4.     title: &#39;meineSeite&#39;,
  5.     htmlAttrs: {
  6.       lang: &#39;en&#39;
  7.     },
  8.     meta: [
  9.       { charset: &#39;utf-8&#39; },
  10.       { name: &#39;viewport&#39;, content: &#39;width=device-width, initial-scale=1&#39; },
  11.       { hid: &#39;description&#39;, name: &#39;description&#39;, content: &#39;&#39; },
  12.       { name: &#39;format-detection&#39;, content: &#39;telephone=no&#39; }
  13.     ],
  14.     link: [
  15.       { rel: &#39;icon&#39;, type: &#39;image/x-icon&#39;, href: &#39;/favicon.ico&#39; }
  16.     ]
  17.   },
  19.   // Global CSS: https://go.nuxtjs.dev/config-css
  20.   css: [
  21.   ],
  23.   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  24.   plugins: [
  25.   ],
  27.   // Auto import components: https://go.nuxtjs.dev/config-components
  28.   components: true,
  30.   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  31.   buildModules: [
  32.     // https://go.nuxtjs.dev/typescript
  33.     &#39;@nuxt/typescript-build&#39;,
  34.     // https://go.nuxtjs.dev/tailwindcss
  35.     &#39;@nuxtjs/tailwindcss&#39;,
  36.   ],
  38.   // Modules: https://go.nuxtjs.dev/config-modules
  39.   modules: [
  40.   ],
  42.   // Build Configuration: https://go.nuxtjs.dev/config-build
  43.   build: {
  44.   }
  45. }

my Projekt structure:

  1. .nuxt
  2. components
  3.     Main.vue
  4.     NuxtLogo.vue
  5. nodemodules
  6. pages
  7.     products
  8.         [id].vue
  9.         index.vue
  10.     index.vue
  11. static
  12. store
  13. .editorconfig
  14. .gitignore
  15. nuxt.config.js
  16. package-lock.json
  17. package.json
  18. README.md
  19. 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.

huangapple
  • 本文由 发表于 2023年6月27日 21:30:53
  • 转载请务必保留本文链接：https://go.coder-hub.com/76565400.html
  • nuxt.js
  • nuxt3
  • nuxtjs3
  • routes
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定