重新加载页面时找不到vue js：路由

Question

Here is simple vue-routing

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 loaded properly (ie : /foo and /bar ) when i click on it but if i refresh any vue routed url (ie /foo or /bar ) url i will get error message

cannot get the page

I am serving it with simple express server

app.get('/', (req, res) => res.sendFile('index.html',{ root : __dirname}))

Answer 1

You have to redirect all the routes to main file index.html .

app.get('/', (req, res) => res.sendFile('index.html',{ root : __dirname}))
app.get('*', (req, res) => res.sendFile('index.html',{ root : __dirname}))

Answer 2

You have to redirect all the routes to main file index.html , but after of your route main, so:

//route main
app.use('/api/example', require('./routes/example')); 
//routes auxiliary
app.get('/', (req, res) => res.sendFile('index.html', { root : __dirname + '/public'}))
app.get('*', (req, res) => res.sendFile('index.html', { root : __dirname + '/public'}))