具有上下文和参数的 Nuxt vue 路由器问题

Question

我的 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'

Answer 1

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

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

尽管 Vue 通常用 $ 命名原型变量，并且 Nuxt 以这种方式为 context $axios 属性添加前缀，但 Nuxt 不会route.

具有上下文和参数的 Nuxt vue 路由器问题

Nuxt vue router problem with context and params

javascript

typescript

vue.js

vue-router

nuxt.js