vue3 路由配置 ，路由匹配到404页面

对于没有匹配到的路由，我们通常会匹配到某个固定的页面，如404页面，在vue3中，我们通常通过pathMatch来设置。如下：

 // 方法一：
    {
        path: '/:pathMatch(.*)',

        component: () => import ('../views/notFound.vue')
    },
    // 方法二
    {
        path: '/:pathMatch(.*)*',

        component: () => import ('../views/notFound.vue')
    },

方法二比方法一后面多了个“*”，他们的区别在于是否解析“/”。
如：当我访问一个不存在的路由 “http://127.0.0.1:5173/#/homef...”时，

方法一

<template>
  <div class=''>404 页面找不到了</div>
  <!-- path: '/:pathMatch(.*)' -->
  <!-- 输出为： homefdfsd/fesdfsd -->
  <h1>{{$route.params.pathMatch}}</h1> 
</template>

方法二

<template>
  <div class=''>404 页面找不到了</div>
  <!-- path: '/:pathMatch(.*)*' -->
  <!-- 输出为： [ "homefdfsd", "fesdfsd" ] -->
  <h1>{{$route.params.pathMatch}}</h1>
</template>

完整代码如下

import {
    createRouter,
    createWebHashHistory
} from 'vue-router'

const routes = [
    { 
        path: "/",
        redirect: '/home'
      },{
        path: '/home',
        component: () => import('../views/home.vue')
    },
    {
        path: '/about',
        component: () => import ('../views/about.vue')
    },
    // 方法一：
    {
        path: '/:pathMatch(.*)',

        component: () => import ('../views/notFound.vue')
    },
    // 方法二
    {
        path: '/:pathMatch(.*)*',

        component: () => import ('../views/notFound.vue')
    },
]
const router = createRouter({
    routes,
    history:createWebHashHistory()
})

export default router