目錄

項(xiàng)目場(chǎng)景：vue3,路由,404頁(yè)面

問(wèn)題描述

原因分析：

解決方案：

使用/:pathMatch(.*)或者/:catchAll(.*)

此圖片用來(lái)封面引流的,前面不看都行,解決方案,點(diǎn)我點(diǎn)我

項(xiàng)目場(chǎng)景：vue3,路由,404頁(yè)面

vue3項(xiàng)目中404頁(yè)面的顯示

問(wèn)題描述

Catch all routes ("*") must now be defined using a param with a custom regexp.

當(dāng)訪問(wèn)url時(shí),訪問(wèn)沒(méi)有配置的路由時(shí),默認(rèn)顯示404頁(yè)面,瀏覽器報(bào)錯(cuò)

?

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

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: () => import('../layout/layout.vue'),
    children: [
      {
        path: 'about', // 這里不要加上/about,使用就找不到頁(yè)面
        name: 'about',
        component: () => import('../views/AboutView.vue'),
      },
    ],
  },
  {
    path: '*',
    redirect: '/404',
    children: [
      {
        path: '/404', // 這里要加上/404,和上面的redirect對(duì)應(yīng),必須加上/
        name: '404',
        component: () => import('../views/404/404.vue'),
      },
    ],
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

原因分析：

當(dāng)捕獲*所有的路由時(shí),需要使用正則表達(dá)式的參數(shù)來(lái)表示

解決方案：

使用/:pathMatch(.*)或者/:catchAll(.*)

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

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: () => import('../layout/layout.vue'),
    children: [
      {
        path: 'about', // 這里不要加上/about,使用就找不到頁(yè)面
        name: 'about',
        component: () => import('../views/AboutView.vue'),
      },
    ],
  },
  {
    path: '/:pathMatch(.*)',
    redirect: '/404',
    children: [
      {
        path: '/404', // 這里要加上/404,和上面的redirect對(duì)應(yīng),必須加上/
        name: '404',
        component: () => import('../views/404/404.vue'),
      },
    ],
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

上面的方法會(huì)報(bào)一個(gè)警告:

之前的children里面需要加上'/'的問(wèn)題解決,把children里面提出來(lái)

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

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: () => import('../layout/layout.vue'),
    children: [
      {
        path: 'about', // 這里不要加上/about,使用就找不到頁(yè)面
        name: 'about',
        component: () => import('../views/AboutView.vue'),
      },
    ],
  },
  {
    path: '/404',
    name: '404',
    component: () => import('../views/404/404.vue'),
  },
  {
    path: '/:pathMatch(.*)',
    redirect: '/404',
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

此圖片用來(lái)封面引流的,前面不看都行,解決方案,點(diǎn)我點(diǎn)我

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-617717.html

到了這里，關(guān)于vue3中404頁(yè)面顯示問(wèn)題Catch all routes (“*“) must now be defined using a param with a custom regexp.的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！