Nuxt vue 路由器的上下文和参数问题答案

【问题标题】：Nuxt vue router problem with context and paramsNuxt vue 路由器的上下文和参数问题
【发布时间】：2021-06-09 06:45:43
【问题描述】：

我的 nuxt 应用程序有一些问题，首先我无法保存参数。我是这样保存的：

    quiz(id: string) {
      this.$router.push({ path: '/playlists/quiz', params: { id } });
    },

然后当我想在我被推送的路线中读取这个参数时

    e() {
      console.log(this.$route.params);
    },

它返回一个空对象{}

参数问题已解决

第二个问题是我在 asyncData 中使用 $route 时遇到问题。我写道：

  async asyncData({ $axios, $route }: any) {
    let res;
    try {
      console.log($route);
      res = await $axios
        .$get(`http://localhost:8080/quiz/questions/${$route.params?.id}`)
        .then((res: object) => {
          console.log(res);
          return res;
        });
    } catch (error) {
      console.error(error);
      res = '';
    }
    return { res };
  },

然后我有错误 Cannot find name '$route'

【问题讨论】：

标签： javascript typescript vue.js nuxt.js vue-router

【解决方案1】：

尝试使用route，而不是$route：

async asyncData({ $axios, route }: any) {
  console.log(route);
  ...
}

尽管 Vue 通常使用 $ 命名原型变量，并且 Nuxt 以这种方式为 context $axios 属性添加前缀，但 Nuxt 并没有使用 route 这样做。

【讨论】：