从直接链接导航时，Nuxt.js `this.$route.params.id` 未定义

Posted 2023-03-10

【中文标题】从直接链接导航时，Nuxt.js `this.$route.params.id` 未定义

【英文标题】：Nuxt.js `this.$route.params.id` is undefined when navigating from direct link

【发布时间】：2021-10-08 10:02:53

【问题描述】：

当我将 Nuxt.js 与 s-s-r 模式一起使用时，我遇到了一个奇怪的问题，我正在使用 nuxt fetch() 获取页面组件中的数据，这在我在 nuxt 链接之间导航时可以正常工作，但是如果我刷新页面或从直接链接访问特定页面，在某些情况下this.$route.params.id 未定义，我无法弄清楚是什么导致了这个问题 pages文件夹内的文件结构

---

pages/blogs/_id/index.vue

<template>
  <div class="container-padding">
     singleBlog
  </div>
</template>

<script>
import  getSingleBlog  from "@/utils/api";
export default 
  data() 
    return 
      singleBlog: ,
    ;
  ,

  async fetch() 
    this.singleBlog = await getSingleBlog(this.$route.params.id);
  ,
;
</script>

utils/api.js

import axios from 'axios'
let baseUrl = 'https://myurl'

/* get single blog  */
export const getSingleBlog = async (blogId) =>
  let req =  await axios.get(`$baseUrl/api/blog/$blogId`)
  return await req.data

---

这是我的.htaccess 文件

RewriteEngine On
RewriteBase /
DirectoryIndex
Options -Indexes
# Forcing all incoming requests to HTTPS. 
# HTTPS is required for PWA. If you don't want PWA feature you can deisable next 2 lines

RewriteCond %HTTP_HOST ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ https://%1/$1 [R=301,L]

RewriteCond %HTTP_HOST ^mydomen.com$
RewriteRule ^(.*) "http://127.0.0.1:3000/$1" [P,L]

【问题讨论】：

in some cases 很难调试。你有minimal reproducible example吗？问题应该来自其他地方，而不是显示的代码 IMO。

另外，什么叫“直接链接”？ nuxt-link 或 a 标签？

例如https://mysite/blogs/164

您展示的代码应该可以正常工作。

@kissu 嗨，你是对的，给定的代码在 heroku 主机上完美运行，也许我的 htaccess 文件中有一个错误影响整个应用程序。 P.S 我已经更新了我的问题并添加了 htaccess 文件

【参考方案1】：

这是因为在直接访问时它在服务器端调用，但使用nuxt-link 的导航在客户端调用它。

this 在服务器端

不可用

在渲染路由时在服务器端调用fetch，在导航时在客户端调用。根据Nuxt Docs

【讨论】：

fetch() 在服务器和客户端都可用，据我所知允许使用this。 nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle#server你确定你在说this吗？

@kissu，在您发送server-side 的页面顶部的图像上，它说只要上下文作为参数传递就可以使用它，并且在下面的图像中client-side 是，它说this 在此处可用，而不是在上图中。我不是 100% 确定，但这就是文档所说的。

所以，我在/blogs/_id.vue 文件中使用fetch() 钩子尝试了target: server + s-s-r: true，如果我尝试使用@ 到达/blogs/12，它会正确返回值12 987654337@在里面。