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

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

common section

Answer 1

如果您只有一个位置可以重定向到，请查看Andrew1325的答案。如果存在多个路由到重定向的对决，this thread会有一些想法。

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

在/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')
}

了解中间件here

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

详细了解here

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

您可以阅读有关here

的信息

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

Answer 3

对 @parker_codes 有很大帮助，他的实现有一个小缺陷，即循环重定向，也就是永远的重定向循环。

为了解决这个问题，在父组件中添加一些检查。这是因为每当访问子路由时，Nuxt Js 都会调用父路由的中间件。


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

<script>
export default {
  middleware({ route, redirect, from }) {
    if(route.path == "/browse" || route.path == "/browse/"){
     return redirect("/browse/songs/new")
    }

  }
}
</script>

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

3 个答案: