NUXT分类广告站点动态嵌套路由访问重定向实现问题咨询

实现方案 #

你只需要在_category.vue和_state.vue中增加重定向逻辑即可，无需修改现有_city.vue和_slug.vue的代码，完全兼容你已经写好的ProductsListComponent参数获取逻辑。

如果你使用的是 Nuxt 3

在两个父级路由页面中通过definePageMeta配置重定向规则：

1. _category.vue 代码修改：

<template>
  <NuxtChild />
</template>

<script setup>
definePageMeta({
  redirect: {
    to: (route) => {
      // 可替换为根据用户定位获取默认州、城市的逻辑
      const defaultState = 'sp'
      const defaultCity = 'sao-paulo'
      return `/${route.params.category}/${defaultState}/${defaultCity}`
    },
    // 永久重定向用301（利于SEO），临时重定向用302
    statusCode: 301
  }
})
</script>

2. _state.vue 代码修改：

<template>
  <NuxtChild />
</template>

<script setup>
definePageMeta({
  redirect: {
    to: (route) => {
      const { category, state } = route.params
      // 可替换为根据当前state匹配对应默认城市的逻辑
      const defaultCity = 'sao-paulo'
      return `/${category}/${state}/${defaultCity}`
    },
    statusCode: 301
  }
})
</script>

如果你使用的是 Nuxt 2

在两个父级路由页面中通过asyncData钩子执行重定向：

1. _category.vue 代码修改：

<template>
  <NuxtChild />
</template>

<script>
export default {
  async asyncData({ params, redirect }) {
    // 可替换为根据用户定位获取默认州、城市的逻辑
    const defaultState = 'sp'
    const defaultCity = 'sao-paulo'
    return redirect(301, `/${params.category}/${defaultState}/${defaultCity}`)
  }
}
</script>

2. _state.vue 代码修改：

<template>
  <NuxtChild />
</template>

<script>
export default {
  async asyncData({ params, redirect }) {
    const { category, state } = params
    // 可替换为根据当前state匹配对应默认城市的逻辑
    const defaultCity = 'sao-paulo'
    return redirect(301, `/${category}/${state}/${defaultCity}`)
  }
}
</script>

补充说明 #

如果需要动态匹配默认城市，比如根据用户IP定位返回对应地区参数，直接把重定向逻辑里写死的默认值替换为接口请求获取的结果即可。

内容的提问来源于stack exchange，提问作者Helder Ferrari