Vue Router Webpack Dot in Params Vue Router Webpack Dot in Params vue.js vue.js

Vue Router Webpack Dot in Params


I was dealing with the same issue, even I'm late to the conversation maybe somebody will find useful the solution I found.

It appears to be webpack's fault.

If using vue-cli's webpack template you'll need to configure a proxy for the routes you need. For example in your case you'll need to add this to the config/index.js file:

...dev: {  ...  proxyTable: {    '/t/*.*': { // this will match all urls with dots after '/t/'      target: 'http://localhost:8080/',  // send to webpack dev server      router: function (req) {        req.url = 'index.html'  // Send to vue app      }    }    // Any other routes you need to bypass should go here.  }  ...},...

This way webpack will proxy all requests to that url and don't treat these as files.


Add /something after paramseg: in your route

{  path: your-route/:paramname/something",  component: somecomponent,}

After this, you should be able to access the route using this.$route.params.paramname


do below setting in webpack

devServer: {      historyApiFallback: {          disableDotRule: true      } }