vue匹配找不到的路径

Vue路由匹配找不到的路径时，跳转404页面

vue2

方法一：

{
    path: '*',
    component: ()=> import('404页面')
}

使用效果：

pathMatch 为默认字段名

方法二：

{
    path: '/:nonePath(.*)', // 可自定义字段名
    component: () => import ('404页面')
}

使用效果：

vue3

方法一：

{
    path: '/:pathMatch(.*)',
    component: () => import ('404页面')
},

使用效果：

方法二：

{
    path: '/:pathMatch(.*)*',
    component: () => import ('404页面')
}

使用效果：

pathMatch 为自定义字段；方法二比方法一后面多了个 “*”，他们的区别在于是否解析 ‘’/"

总结

1. vue2中可以用 "*" 来匹配，而vue3中不能 "*" 来匹配;

2. vue2中用 "*" 来匹配默认字段为 pathMatch;

3. 通用方法为 /:[自定义字段名](.*)

4. vue3中 /:[自定义字段名](.*)* 可将路径按 / 分割为数组