擷取找不到的路由

我們可以自訂一個畫面讓未知、找不到的路由都導向這邊
eg.
建立 views/NotFound.vue

<template>
  <section style="padding:24px">
    <h2>404 - Not Found</h2>
    <p>找不到頁面：<code>{{ $route.fullPath }}</code></p>
    <RouterLink to="/">回首頁</RouterLink>
  </section>
</template>

router/index.js 再加入一行 NotFound 路由

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import User from '../views/User.vue'
import NotFound from '../views/NotFound.vue'

export default createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/about',name: 'about', component: About },
    { path: '/users/:id', name: 'user', component: User }, // 動態參數
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  ],
})

components/Go404.vue

<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

function go404() {
  router.push({
    name: 'NotFound',
    params: { pathMatch: route.path.substring(1).split('/') },
    query: route.query,
    hash: route.hash,
  })
}
</script>

<template>
  <button @click="go404">go 404</button>
</template>

App.vue

<script setup>
import Go404 from './components/Go404.vue'
</script>

<template>
  <h1>Hello App!</h1>
  <p><strong>Current route path:</strong> {{ $route.fullPath }}</p>
  <nav>
    <RouterLink to="/">Go to Home</RouterLink>
    <RouterLink to="/about">Go to About</RouterLink>
    <RouterLink to="/users/johnny">johnny</RouterLink>
    <RouterLink to="/users/jolyne">jolyne</RouterLink>
  </nav>
  <br>
  <Go404/>
  <main><RouterView /></main>
</template>

<style scoped>
  nav{
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
</style>

可以故意打一些未定義的路由試試看，它們都會進到 NotFound.vue

ref:
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html