Skip to content

全匹配路由

Catch-all Route,或者叫 Wildcard Route,翻译成中文叫做“全匹配路由”,这是一种特殊类型的路由。它会匹配指定路径下的所有子路径,通常用于处理未知路径、错误页面或动态路径的场景。

全匹配路由的特点:

  1. 匹配所有的路径:除了已明确定义的路由外,全匹配路由将捕获其余所有路径。
  2. 动态参数:匹配的路径会以数组形式存储在动态参数中,例如 slug.
  3. 使用场景:处理 404 页面、捕获所有动态路径(如博客文章、商品详情页)、用于构建层级复杂的 URL.

使用方法:

如果需要一个全匹配路由,可以创建一个名为 [...名字].vue 的组件,没有匹配上的路由最终会被全匹配路由匹配到。

<template>
<p>{{ $route.params.slug }}</p>
</template>
<script setup>
// pages/[...slug.vue]
console.log(route.params.slug) // ["hello", "world"]
</script>

导航到 /hello/world 将渲染:

<p>["hello", "world"]</p>

-EOF-