基于对其他应用程序请求的动态路线

Question

我目前正在 nuxt 3 中创建一个应用程序。这个应用程序只有一个任务：

1. 获取并解析请求url
2. 通过 API 将请求 url 参数传递给其他应用程序
3. 根据响应有条件地呈现其中一个页面

在我的项目中我有：

[...]
/pages
  - post.vue
  - user.vue
  - info.vue
  - [...]
app.vue
[...]

在

app.vue

<template>
  <NuxtPage :name="data.page">
<template>

<script setup>
// here some shortened logic
const route = useRoute().fullPath;
const data = new RequestToBe(route).send();

console.log(data) // { page: 'post', ... }
</script>

如何根据数据呈现我的页面？是配置router，还是通过渲染逻辑来解决？

Answer 1

什么在您的设置中不起作用？想象一下，您可以在更改路线之前检查 data.page：

<template>
  <NuxtPage />
</template>

<script setup>
// here some shortened logic

const router = useRouter()
const route = useRoute().fullPath;

try {
  const data = new RequestToBe(route).send();
  console.log(data) // { page: 'post', ... }
  if (data.page === 'post') {
    // go to post page
    router.push('/post')
  } else {
    // or do something else
  }
} catch (error) {
  // something went wrong
  console.log(error)
}
</script>