router.beforeEach((to, from, next) => { if (!to.matched.length) { next('/404') } else { next() } })

这段代码是 Vue Router 中的全局前置守卫，作用是在路由跳转之前进行拦截和检查。如果 `to` 对象中的 `matched` 数组长度为 0，表示该路由不存在或者未定义，那么就调用 `next` 方法跳转至 404 页面。如果 `matched` 数组长度不为 0，说明该路由存在并已经匹配到了对应的组件，那么就调用 `next` 方法进行路由跳转。

相关问题

vue3 路由跳转404

在Vue 3中，路由跳转遇到404错误的情况可以通过以下方式处理。首先，需要在路由配置中定义一个404页面，用于显示路由未匹配到的情况。可以使用`<router-view/>`标签在主组件中渲染404页面。另外，还可以通过路由导航守卫的`beforeEach`方法来判断路由是否存在，如果不存在则跳转到404页面。

代码示例：

// 路由配置
const routes = [
  // 其他路由配置...
  {
    path: '/404',
    name: '404',
    component: () => import('../views/NotFound.vue')
  },
  {
    path: '/:catchAll(.*)',
    redirect: '/404'
  }
];

// 路由实例化
const router = createRouter({
  history: createWebHistory(),
  routes
});

// 路由导航守卫
router.beforeEach((to, from, next) => {
  if (to.matched.length === 0) {
    next('/404');
  } else {
    next();
  }
});

vuepress 设置 404 500 页面跳转到指定页面

要在VuePress中设置404和500错误页面跳转到指定页面，可以通过配置 `.vuepress/config.js` 文件来实现。

首先，需要在 `.vuepress/public` 目录下创建自定义的 404.html 和 500.html 错误页面。

然后，在 `.vuepress/config.js` 中添加以下配置：

module.exports = {
  // ...
  // 自定义404和500页面
  configureWebpack: {
    resolve: {
      alias: {
        '@404': '/404.html',
        '@500': '/500.html'
      }
    }
  },
  extend: '@vuepress/theme-default',
  themeConfig: {
    // ...
  },
  // 自定义错误页面路由
  plugins: [
    [
      '@vuepress/plugin-register-components',
      {
        components: [
          {
            name: '404Page',
            path: '@404'
          },
          {
            name: '500Page',
            path: '@500'
          }
        ]
      }
    ]
  ]
}

其中，`@404` 和 `@500` 分别是自定义的 404 和 500 页面的别名，`@` 表示 `.vuepress/public` 目录。

接着，在 `.vuepress/theme/index.js` 中添加以下代码：

export default {
  // ...
  async enhanceApp({ app }) {
    // 注册全局路由守卫，用于处理404和500页面的跳转
    app.router.beforeEach((to, from, next) => {
      if (to.matched.length === 0) {
        next({ name: '404Page' });
      } else if (to.matched.some(record => record.meta && record.meta.status === 500)) {
        next({ name: '500Page' });
      } else {
        next();
      }
    });
  }
}

这段代码注册了全局路由守卫，并在路由跳转时判断路由是否匹配成功，如果没有匹配成功则跳转到 404 页面，如果匹配成功但状态码为 500 则跳转到 500 页面。

最后，在需要跳转到 404 或 500 页面的地方，可以使用路由跳转的方式来实现：

this.$router.push({ name: '404Page' }); // 跳转到 404 页面
this.$router.push({ name: '500Page' }); // 跳转到 500 页面

这样就完成了在 VuePress 中设置 404 和 500 页面跳转到指定页面的配置。