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...”时,

方法一

vue3 路由配置 ,路由匹配到404页面_第1张图片

方法二

vue3 路由配置 ,路由匹配到404页面_第2张图片

完整代码如下

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

你可能感兴趣的:(vue3 路由配置 ,路由匹配到404页面)