Question

我正在使用Nuxt，并且创建了一条具有动态路由的路由，该路由使用vuex和axios调用来获取数据。当未指定id参数时，我想将用户路由回index。我看到我可以在动态路由https://nuxtjs.org/api/pages-validateWhen

上使用validate

我正在使用下面的代码，当我导航到localhost:3000/settings/时出现以下错误Cannot read property 'push' of undefined

页面/设置/_id.vue

export default {  
  validate({ params }) {
    if (params.id !== null) {
      this.$router.push({ name: 'index' })
    }
    return false
  }
}

Answer 1

每次导航到新路线之前都会调用一次validate。它将一次称为服务器端。这意味着将在创建组件之前执行验证。因此，您无法访问this。$ router，因为它目前不存在。

请参阅Fetch Hook和Nuxt Lifecycle中的详细说明： https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/#fetch-hook-and-nuxt-lifecycle

基本上，我们需要做的是从nuxt上下文导入重定向和路由以在现场使用它或验证功能。 ROUTE具有有关您的请求的所有信息，重定向是nuxt的一个功能，用于中间件。

我为您创建了一个示例：

<template>
  <v-row>
    <v-col cols="12">
      <pre>
        {{ params }}
      </pre>
    </v-col>
  </v-row>
</template>

<script>
export default {
  data() {
    return {
      params: []
    }
  },
  validate({ redirect, route }) {
    if (route.params) {
      // eslint-disable-next-line no-console
      console.log('RouteParams:', route.params)
      this.params = route.params
    }
    redirect({ name: 'index' })
    // return false
  }
}
</script>

验证动态路由时使用`$ router.push`

1 个答案: