非你网

nuxt 的一些搞法。

• 路由别名。比如你想访问 www.xxx.com 默认对应代码的 ./app/pages/index.vue 和 ./app.vue 文件。如果想对应 ./app/pages/home/index.vue,路由别名就很有用处了。

只需要在 ./app/pages/home/index.vue 中使用路由别名就好。如：

<template>
    <h2>home</h2>
</template>

<script setup lang="ts">
definePageMeta({
  alias: '/'
})
</script>

这种方法，访问地址依然是 www.xxx.com。 初了使用路由别名，还可以使用中间件和redirect 的方式来实现。其实，这两种方式都是 redirect 。但是这个时候地址变成了 www.xxx.com/home 。方法如下。

方法一： ./app/pages/index.vue 依然存在，通过 definePageMeta 来做跳转。

// pages/index.vue
<script setup lang="ts">
definePageMeta({
  redirect: '/home'
})
</script>

方法二： 新建中间件 ./app/middleware/redirectRoot.ts 文件。加入以下代码

export default defineNuxtRouteMiddleware(() => {
  if (useRoute().path === '/') {
    return navigateTo('/home')
  }
})

然后在 nuxt.config.ts 中加入以下代码

export default defineNuxtConfig({
  …,
  nitro: {
    routeRules: {
      '/': { redirect: '/home' }
    }
  }
})

看个人喜好，个人还是喜欢用路由别名，然后是中间件。确实有强迫症，不喜欢多一个 ./app/index.vue 文件。