Here is a basic vue-routing example:
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
];
const router = new VueRouter({
routes:routes,
mode: 'history'
});
var app = new Vue({
router,
data: {
message: 'Hello Vue!'
},
mounted:function(){
}
}).$mount('#app');
In HTML
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-view></router-view>
The links work properly (e.g. : /foo and /bar) when clicked, but if I refresh any vue-routed URL (e.g. /foo or /bar), I receive an error message:
Cannot get the page
I am serving it with a simple Express server
app.get('/', (req, res) => res.sendFile('index.html',{ root : __dirname}))