Vue Nuxt 3 捕捉所有路由 Catch-all Route

本篇介紹如何在Vue Nuxt 3的捕捉所有路由(Catch-all Route)。

Nuxt 3中未匹配的路由可由Catch-all Route捕捉，透過在pages目錄下建立一個叫[...slug].vue的特殊檔案來實現，經常用於作為404頁面。

事前要求

參考「Vue 建立簡單的Nuxt 3網頁」建立簡單的Nuxt 3網頁。

建立pages/[...slug].vue

在pages目錄下建立[...slug].vue檔案，此即為Catch-all Route，可捕捉所有的未匹配路由到此頁面。

pages/[...slug].vue

<script setup>
const route = useRoute()
const path = computed(() =>
  '/' + route.params.slug.join('/')
)
</script>

<template>
    <h1>Catch All Route</h1>
    <p>找不到對應頁面，路由：{{ path }}</p>
</template>

路由參數slug是一個陣列，這邊使用Vue的計算函式computed將slug組合成計算屬性path。

在網址列輸入http://localhost:3000/abc/123，由於此路由未定義，因此會被捕捉到此Catch-all Route頁面。