vue js:routes not found when page reloads

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}))

is this happenning locally or on prod? Are you using the webpack template? because, there are various solutions for this depending on the issue — samayo
– samayo, Commented Jan 25, 2018 at 13:45
its happening on local i am not using webpack build everything included in index.html file and it serves with express — shamon shamsudeen
– shamon shamsudeen, Commented Jan 25, 2018 at 13:47
you need to install connect-history-api-fallback for the htm5 api fall back as shown and configure your express as shown here stackoverflow.com/questions/48277747/… — samayo
– samayo, Commented Jan 25, 2018 at 13:54
Hou have to point all routes to index.html like: app.get('*'... — malcolm
– malcolm, Commented Jan 25, 2018 at 13:55
@samayo i have installed that connect-history-api-fallback and configured but it doesn't worked for me — shamon shamsudeen
– shamon shamsudeen, Commented Jan 25, 2018 at 14:02

malcolm · Accepted Answer · 2018-01-25 13:57:27Z

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}))

MILLER DANIEL QUILINDO VELASCO · Accepted Answer · 2018-07-03 09:02:20Z

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'}))

Collectives™ on Stack Overflow

vue js:routes not found when page reloads

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related