Vue-Router在Webpack模板中不捕获带点的路由

问题描述

我从 webpack模板引导了我的应用程序，并向其中添加了路由/edit/:filename.

I bootstrapped my application from webpack template and added the route /edit/:filename to it.

问题是，包含点的文件名是由Express处理的，而不是由我的Vue应用程序处理的.

The problem is, filenames containing a dot are handled by Express and not by my Vue application.

换句话说，/edit/123与路由匹配，但/edit/123.json或/edit/123.txt不匹配，我从Express收到404.

In other words, /edit/123 is matched by the route but /edit/123.json or /edit/123.txt is not and I get a 404 from Express.

如何匹配路线中的任何内容或至少匹配/edit/anyfilename.json?

How can I match anything or at least /edit/anyfilename.json in my route?

推荐答案

我有一个 answer 来自Vue上的 Linus Borg 论坛. Vue webpack模板使用connect-history-api-fallback将所有HTTP请求重定向到index.html.除非disableDotRule设置为true，否则它将跳过路径中带有点的HTTP请求.正确的配置是

I had an answer from Linus Borg on Vue forum. Vue webpack template uses connect-history-api-fallback to redirect all HTTP requests to index.html. It skips HTTP requests with a dot in the path unless disableDotRule is set to true. The proper config is

app.use(require('connect-history-api-fallback')({
  disableDotRule: true,
  rewrites: [
    {from: /\/app.js/, to: '/app.js'}
  ]
}))

请注意，我们必须为/app.js添加一个额外的重写，以便它不会重定向到index.html.

Notice that we have to add an extra rewrite to /app.js so that it is not redirected to index.html.

这篇关于Vue-Router在Webpack模板中不捕获带点的路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！