如何在VUE3单页应用中使用404组件

发布于 2025-02-08 18:36:36 字数 877 浏览 2 评论 0原文

有以下代码的结构：

路由器

  import { createRouter, createWebHistory } from 'vue-router';

  const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'App',
      component: () => import('../../src/App.vue'),
    },
    {
      path: '/:pathMatch(.*)',
      name: 'ErrorView',
      component: () => import('../components/Error.vue'),
  }
  ],
});

export default router;

。

<template>
  <Land />
  <LeftNavbar />
  <Navbar />
  <Experience />
  <TechnologiesCarousel />
  <Projects />
  <Copyright />
  <BackToTop />
</template>

我该应用程序正确渲染，这很好，但是当我试图编写错误的URL时，例如：http：// localhost：3000/abcf/|| http：// localhost：3000/dsafbdmhgfjweghjfw要重定向到404页，我没有重定向，该页面仍呈现app.vue组件。

有人知道为什么没有渲染404页吗？

原文

I have the following structure of the code:

router.js:

  import { createRouter, createWebHistory } from 'vue-router';

  const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'App',
      component: () => import('../../src/App.vue'),
    },
    {
      path: '/:pathMatch(.*)',
      name: 'ErrorView',
      component: () => import('../components/Error.vue'),
  }
  ],
});

export default router;

App.vue

<template>
  <Land />
  <LeftNavbar />
  <Navbar />
  <Experience />
  <TechnologiesCarousel />
  <Projects />
  <Copyright />
  <BackToTop />
</template>

When I'm pressing in the URL bar: http://localhost:3000. The app is rendering properly which is fine, but when I'm trying to write a wrong URL, for eg: http://localhost:3000/abcf/ || http://localhost:3000/dsafbdmhgfjweghjfw to be redirected to the 404 page, I'm not redirected, the page still rendering the App.vue component.

Does anyone have any idea why the 404 page isn't rendered?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

少女的英雄梦 2025-02-15 18:36:36

尝试按照以下方式尝试/：pathMatch（。*）*：

{
  path: "/:pathMatch(.*)*",
  name: 'ErrorView',
  component: () => import('../components/Error.vue'),
},

在app.vue plote ＆lt; router-view/＆gt;，然后将组件移动到其他视图。

Try like following /:pathMatch(.*)*:

{
  path: "/:pathMatch(.*)*",
  name: 'ErrorView',
  component: () => import('../components/Error.vue'),
},

and in App.vue place <router-view /> and move components to other view.

回复收藏 0 原文

暮色兮凉城 2025-02-15 18:36:36

我认为您正在使用 vue 3 。

在您的路由器文件中，您需要更改以下路径：

  {
      path: '/:pathMatch(.*)*',
      name: 'ErrorView',
      component: () => import('../components/Error.vue'),
  }

对于 vue 2 路径可以是：路径：'*'*'

来自 vue 2-＆gt; 3迁移为他们想知道发生了什么的人提供了更多信息：

从本质上讲，您应该能够用'/：pathMatch（.pathmatch（.fath）替换''路径（。）'好！

原因：Vue路由器不再使用通道regexp，而是实现了自己的解析系统，该系统允许路由排名并启用动态路由。由于我们通常每个项目添加一条单一的路线，因此支持 *的特殊语法没有任何巨大好处。

I assume you are using Vue 3.

In your router file you need to change the path to this:

  {
      path: '/:pathMatch(.*)*',
      name: 'ErrorView',
      component: () => import('../components/Error.vue'),
  }

For Vue 2 the path can be: path:'*'

From Vue 2 -> 3 migration some more info for those they want to know what has changed:

Essentially, you should be able to replace the '' path with '/:pathMatch(.)*' and be good to go!

Reason: Vue Router doesn't use path-to-regexp anymore, instead it implements its own parsing system that allows route ranking and enables dynamic routing. Since we usually add one single catch-all route per project, there is no big benefit in supporting a special syntax for *.

回复收藏 0 原文

~没有更多了~