Vue Router Webpack Dot in Params

Question

I am building an application with NodeJS / Express for the back and VueJS for Front using Vue Cli and webpack.

I would like to know if there is a way to allow a point in the parameters for my routes.

This is what I get when I try without configuration

Impossible 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 problem, even if I am late for a conversation, maybe someone will find a useful solution that I found.

There seems to be a problem with webpack.

When using the vue-cli web package template, you need to configure the proxy server for the necessary routes. For example, in your case, you need to add this to the config/index.js :

 ... 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. } ... }, ... 

Thus, webpack proxies all requests to this URL and does not treat them as files.