Vue Router Webpack Dot in Params

Question

I'm creating an app with NodeJS/Express for the back and VueJS for the Front using Vue Cli and webpack.

I'd like to know if there is a way to allow dot in params for my routes.

Here is what I get when i try with no config

Cannot GET /t/firstname.lastname

Here is my /src/main.js

import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import VueAutosize from 'vue-autosize'

import Main from './components/Main.vue'
import Signin from './components/Signin.vue'

// We want to apply VueResource and VueRouter
// to our Vue instance
Vue.use(VueRouter)
Vue.use(VueResource)
Vue.use(VueAutosize)

const router = new VueRouter({
  history: true
})

// Pointing routes to the components they should use
router.map({
  '/t/:person': {
    component: Main
  },
  '/signin': {
    component: Signin
  }
})

router.beforeEach(function (transition) {
  if (transition.to.path === '/signin' && window.localStorage.length !== 0) {
    transition.redirect('/')
  } else if (transition.to.path === '/' && window.localStorage.length === 0) {
    transition.redirect('/signin')
  } else {
    transition.next()
  }
})

// Any invalid route will redirect to home
router.redirect({
  '*': '/404'
})

router.start(App, '#app')

Answer 1

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.