Question

我正在使用具有历史记录模式的Vue路由器。在按钮上单击当前页面，我将其路由到下一页。在第二页上，当我重新加载时，我得到404。有没有一种方法可以在Vue中处理此问题并将其重定向到主页。

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "first",
      component: First
    },
    {
      path: "/abc",
      name: "abc",
      component: Second,
      props: true
    },

Answer 1

您可以使用基于历史记录模式的哈希模式来解决路由器上的问题

let router = new Router({
    mode: "hash",
  routes: [
    {
    //and the urls with path on here ...

Answer 2

我们已经在后端解决了这个问题，我们在过滤器中拦截了请求并将其重定向到首页。我们已经使其可配置。

Answer 3

这与Vue Router中的历史记录模式如何工作有关。我已经创建了有关它的文章，并提供了解决方案。

取决于您的服务器实现，您需要在此处启用URL重写。这是使用Express / Node.js来实现的方式：

const express = require('express');
const app = express();
const port = 80;
const buildLocation = 'dist';
app.use(express.static(`${buildLocation}`));
app.use((req, res, next) => {
  if (!req.originalUrl.includes(buildLocation)) {
    res.sendFile(`${__dirname}/${buildLocation}/index.html`);
  } else {
    next();
  }
});
app.listen(port, () => console.info(`Server running on port ${port}`));

有关更多信息，请查看https://blog.fullstacktraining.com/404-after-refreshing-the-browser-for-angular-vue-js-app/。 HTH

Answer 4

即使在尝试上述解决方案后，任何人仍面临问题，请找到以下方法。如果您有vue.config.js，其中有

module.exports = {
  publicPath: process.env.PUBLIC_URL || "", // <-- this is wrong
  ...
};

要么删除vue.config.js，要么尝试从导出对象中删除publicPath。

如果您不想删除publicPath，也可以尝试以下方法

module.exports = {
  publicPath: process.env.PUBLIC_URL || "/", // <-- this is correct now (and default)
  transpileDependencies: ["vuetify"],
};

页面刷新上的Vue路由器获取404

4 个答案: