如果我有无尽的嵌套路由，不停止(即基于用户创建的文章中的文章):
/articles/id/id/id/id/id/id/id/id/id/id/id/id/id/id/id/id/id/id/id/infinity
如何在Nuxt3中处理类似的事情，而不必手动创建每个目录和动态文件？
推荐答案
我需要用所有路由来做这个.Documentation and example.
你的页面 struct 是这样的.
|-pages
|-articles = Folder
|--[...id].vue = Catch all routes
|--index.vue = Article Content
|-articles.vue = NuxtPage
|-index.vue = Home page
~pages/articles.vue
<script lang="ts" setup>
</script>
<template>
<div>
<NuxtPage />
</div>
</template>
<style scoped lang="css"></style>~/pages/articles/index.vue文章内容示例
<script lang="ts" setup>
</script>
<template>
<div>
Articles page
</div>
</template>
<style scoped lang="css"></style>~/pages/articles/[...id].vue动态ID
<script lang="ts" setup>
const route = useRoute()
</script>
<template>
<div>
<h1>Dynamic ID. Params: {{ route.params.id }}</h1>
</div>
</template>
<style scoped lang="css"></style>Expected output.
希望有帮助
Vue.js相关问答推荐
元素不会对react 性props 的更改做出react
vue 不重新渲染数据更改
如何使用 vuejs 在浏览器 url 中获取当前 product.id 的详细信息
如果找不到路由，Vue.js如何重定向到公共路由
混合使用 React 和 Vue 是个好主意吗？
v-for 内部的组件
在 VueJS 中存储图像的正确位置是什么 - 公共文件夹或assets文件夹？
Vue.js 中有没有类似Jquery $(document).ready的功能？
更新 vue.js 中的数据属性/对象
Vue.js：TypeError：无法设置只有 getter 的 #
Vuejs 3 从子组件向父组件发出事件
我可以使用react路由创建别名路由吗？
使用 refs 聚焦元素目标
执行调度程序刷新期间未处理的错误，这可能是一个 Vue 内部错误
异步api调用后如何使用vuex getter
Vue.js webpack：如何获取目录中的文件列表？
如何让 vuetify 数据表在卡片内时跨越容器的整个宽度？
克隆元素并附加到 DOM 的正确方法
laravel vuejs/axios put request Formdata 为空
使用 svelte js 的原因
实用课程推荐