vue找不到路由时,默认匹配404页面

224 阅读1分钟

tips:需要注意,匹配所有要放到最后,因为路由是从上往下匹配,匹配到一个后就会停止,如果把加 * 号的路由写到上边,可能会引发死循环.

vue2中:

const routes = [
    {
        path: '/xxx',
        name: 'Xxx',
        component: () => import('../Xxx')
    },
    {
        path: '*',
        redirect: '/xxx'    
    }
]

vue3中:

需要注意的是 vue3 + vue-router

vue-router 把 * 这种写法废弃了,如果需要匹配所有,需要写成这样

const routes = [
  // pathMatch是参数的名称,例如,要去/not/found
  // { params: { pathMatch: ['not', 'found'] }}
 
  // 最后一个*,它意味着重复的参数,如果您打算使用它的名称直接导航到未找到的路由,那么这是必要的
  { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
 
  // 如果你省略了最后一个' * ',参数中的' / '字符将在解析或推入时被编码
  { path: '/:pathMatch(.*)', name: 'bad-not-found', component: NotFound },
]