使用nuxt.js动态路由传递参数

Question

我准备在动态路由中接收到一个参数后查询数据库返回结果，发现控制台报错。

TypeError: 无法读取 null 的属性“标题”

我去查看请求的时候发现第一个请求返回了数据，然后发送同样的请求但是拼接的参数是null并报错。

这是第二个请求 304

这是我的页面代码。 `

 <templat>
  <div class="wrapper qa-content">
    <div class="qa-title">
      <div class="fl title">
        <h2>{{problem.title}}</h2>
        <p>
          <span
          >{{labes(index)}}</span>
          <span>{{timeago(problem.createtime)}}</span>
        </p>
      </div>
import "~/assets/css/page-sj-qa-detail.css";
import axios from "axios";
import problemApi from "@/api/problem";
import replyApi from "@/api/reply";
import labelApi from "@/api/label";
export default {
  asyncData({ params }) {
    return axios
      .all([
        problemApi.findById(params.id),
        replyApi.findByProId(params.id),
        problemApi.findPL(params.id)
      ])
      .then(
        axios.spread(function(pojo, replyList, labelList) {
          return {
            problemId: params.id,
            replyList: replyList.data.data,
            problem: pojo.data.data,
            labelList: labelList.data.data
          };
        })
      );
  },
  data() {
    return {
      CurrentreplyId: "",
      commentList: [],
      labelName: [],
      textarea: "",
      dialogVisible: false,
      content: "",
      editorOption: {
        // some quill options
        modules: {
          toolbar: [
            [{ size: ["small", false, "large"] }],
            ["bold", "italic"],
            [{ list: "ordered" }, { list: "bullet" }],
            ["link", "image"],
            ["blockquote", "code-block"]
          ]
        }
      }
    };
  },
  mounted() {
    console.log("app init, my quill insrance object is:", this.myQuillEditor);
  },
  methods: {

    labes(index) {
      console.log(this.labelList);
       labelApi.findOne(this.labelList[index].labelid).then(res => {
        this.labelName.push(res.data.data.labelname);
        console.log(this.labelName);
      });
    },
     check(id) {
      console.log(id);
       replyApi.findByParentid(id).then(res => {
        this.commentList = res.data.data;
      });
    },
    shows(item) {
      console.log(item.id);
      if (item.content === null || item.content === "" || item.content === "") {
        return false;
      } else {
        return true;
      }
    }

`

此页面是从前一页面动态路由的。

<nuxt-link :to="'/qa/items/'+item.id" target="_blank">{{item.title}}</nuxt-link>

Answer 1

好的。我认为这有帮助。如果我理解正确，请执行以下操作：

1. 您在上一页
2. 您在路线中单击带有项目 ID 的 nuxt-link
3. 您的新路由加载并出现错误：因为您的页面从 API 获取数据两次（但您没有重新加载页面），这是正确的吗？

如果是这样，我不确定为什么您的asyncData 会执行两次，但您可能可以这样解决：

asyncData({ params }) {
if (params.id) {
    return axios
  .all([...
}

这将确保您的请求仅在存在 ID 时才发出，并且不会发送 null。

老实说，我不知道为什么会重新发送请求...

我也不太明白你的 API 是什么样子的。我看到它以某种方式返回了 Promise，并且您可以在其上调用方法...我在这种情况下还没有看到，但是好的 :)。

此外，您似乎在您的方法中执行了进一步的 API 调用。 也许这就是问题所在： <span>{{labes(index)}}</span> 我看不到将传递给此方法的内容。该索引未定义... 然后调用

labes()（你的意思是labels？）方法，你执行 labelApi.findOne(this.labelList[index].labelid) 但由于索引未定义，我认为this.labelList[index] 不会返回有用的东西，你在那里提出请求？

（取决于您的 api.findOne() 方法的作用。它本身是否会向实际的远程 API 发送请求？）

干杯