如何重定向到nuxt中的子路由？

Question

我想重定向到子路由，如果用户输入到localhost:3000/browse，他重定向到localhost:3000/browse/songs/new. 但我不知道该怎么做！

我不知道这个例子的最佳组件结构是什么

我的路线将是这样的：

localhost:3000/browse/songs/new
localhost:3000/browse/songs/popular
localhost:3000/browse/songs/top
localhost:3000/browse/songs/podcasts
localhost:3000/browse/songs/playlist

在所有主题中，我都有一个共同的部分，但内容不同。

公共部分

Answer 1

如果您只能重定向到一个位置，请查看 Andrew1325 的回答。如果有多个路由到重定向匹配，这个线程有一些想法。

我这样做的方式是使用“匿名”中间件，如下所示：

在 /pages/browse/index.js

<script>
export default {
    middleware: [
        function({ redirect }) {
            redirect('/browse/songs/new');
        },
    ],
};
</script>

Answer 2

要自动或在某些条件下重定向，您需要使用中间件。这可以像这样设置：

//browse/index.js
<template>
  //no need for content as redirecting
</template>

<script>
export default {
  middleware: 'redirect'
}
</script>

和你的中间件文件...

//middleware/redirect.js
export default function ({ store, redirect }) {
  // automatic redirect
  return redirect('/browse/songs/new')
}

在此处阅读有关中间件的信息

您的页面结构设置在pages文件夹中，您可以根据自己的路由命名文件夹和页面。

在这里阅读

要使用通用主题，您可以使用layouts。这些将有一个<nuxt-child/>部分将显示单个页面内容。

您可以在此处阅读有关它们的信息

所有这些都是非常基本的 nuxt 内容，您应该花一些时间阅读文档或查看此处列出的一些教程。