Question

我正在尝试使用历史记录模式设置SPA路线，如下所示：

{
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/articles',
      component: ArticleList,
      children: [
        {
          path: ':title',
          component: ArticleView
        }
      ]
    }
  ]
}

当我在vue和express应用程序上使用历史模式路由时，我已经将“express-history-api-fallback”设置为管道中的最后一个中间件：

const app = express();
const root = path.join(__dirname, '../client/dist');
app.use(express.static(root));
/* other middlewares */
app.use(fallback('index.html', {root: root}));

在页面重新加载时，一切正常。即加载网址http://application/articles，正确打开视图，但是当我尝试访问接受参数的视图时，无论如何，视图都没有加载，并且发出了两个请求到快递。

即。对http://application/articles/test的请求将解析为两个请求。一到http://application/articles/test，另一到http://application/articles/app.[calculated-hash].js 据我所知，第一个请求获取index.html，另一个请求获取捆绑的js脚本。

此外，在快递应用程序中，所有到api的路径都以'api'前缀开头。

问题：我的设置/代码使用历史模式和路由参数有什么问题，因为在手动输入网址或点击刷新时尝试访问时没有加载带参数的路由？

更新：使用connect-history-api-fallback会产生相同的结果

Answer 1

问题在于webpack注入index.html的脚本标记

<script type="text/javascript" src="app.06503cbc260646a996d9.js"></script>

src属性值缺少'/'前缀，因此文件的分辨率失败。

为了使它工作，我已经像这样链接了src文件：

<script type="text/javascript" src="/app.06503cbc260646a996d9.js"></script>

当我使用webpack捆绑js文件时，在webpack配置中我添加了output.publicPath '/'

更多信息：connect-history-api-fallback bugtracker

VueJs 2：使用历史模式和路径参数时无法渲染视图

1 个答案: