Vue Router: URL does not load correct component while router-link does

Question

My project uses Vue2 and Vue Router. I want to be able to load the component Stats by typing in the URL http://example.com/stats.

URL http://example.com/stats does not work, I'm redirected to / and it loads the App component
<router-link :to="/stats">Go to stats</router-link> works perfectly

I would like to know whether it is a Vue Router issue or a server configuration issue. I'd like to mention the fact that I experience this issue both in my localhost and my server using nGinx.

How could I fix this?

app.js:

const routes = [
  { path: '/', component: App },
  { path: '/stats', component: Stats },
  { path: "*", component: PageNotFound },
  { path: '/admin', meta: { requiresAdmin: true }, component: Admin},
  { path: "/not-authorized", component: NotAuthorized },
];

Vue.use(VueRouter);
    
const router = new VueRouter({
  mode: 'history',
  routes,
})

const app = new Vue({
  el: '#app',
  router,
  data () {
    return {}
  },
});

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAdmin)) {
        if (!Store.state.isAdmin) {
            axios.post('/isAdmin').then((response) => {
                if(response.data.isAdmin){
                    next();
                }
                else {
                    next({
                        path: '/not-authorized',
                    })
                }
            });
        }
        else {
            next();
        }
    }
        else {
            next();
        }
    }
    else {
        next(); // make sure to always call next()!
    }
});

Do you also have `new Vue({ el: '#app', router })` somewhere? — thanksd, Apr 07 '17 at 16:13
Of course, sorry I just reduce the `app.js` to what it seemed to me important. I just updated it ! — Léo Coco, Apr 07 '17 at 16:35
Yes I do. When I'm clicking on a `` in my code I'm well redirected to my component. I updated the app.js file — Léo Coco, Apr 07 '17 at 17:08
What's the generated URI when you click on the link? Did you disable the `#` when instantiating the router? — tiagojpdias, Apr 07 '17 at 17:20
Hmm this should be working. You don't get any errors in the console? — thanksd, Apr 07 '17 at 17:21
@tiagojpdias I think so since the `mode:history` is activated ? — Léo Coco, Apr 07 '17 at 17:30
@thanksd No error, I'm just simply redirected to `http://example.com` — Léo Coco, Apr 07 '17 at 17:30
Ah, you're redirected. I thought it was just loading the wrong component. Do you make a `router.beforeEach` call anywhere? — thanksd, Apr 07 '17 at 17:32
@thanksd OMG. I'm going to update the file again... Sorry for that. Yes I do use a `router.beforeEach` but it should not cause the issue should it ? — Léo Coco, Apr 07 '17 at 17:50
Can you comment out all of router.beforeEach and tell what happens then? — Deepak, Apr 07 '17 at 18:07

score 1 · Answer 1 · edited May 23 '17 at 12:09

1

Have you configured your web-server to return the same page regardless of the URL? That way your app can load, and the URL is preserved so routing can take over and select the right component once it's loaded.

This answer https://stackoverflow.com/a/7027686/7816087 suggests the following config for nginx:

location / {
    try_files $uri /base.html;
}

edited May 23 '17 at 12:09

Community

1
1

answered Apr 07 '17 at 19:11

Robert Nagy

61
3

This does not work, the URL is changed to `/` and then the `App` component is loaded – Léo Coco Apr 20 '17 at 02:20

Gabriel Robert · Answer 2 · 2017-04-08T12:44:28.303

1

Go to your Laravel routes and put this:

Route::any('{all}', function () {
    return view('index'); // if your main view is "index"
})

This will ensure that deep linking is working properly on all request handled by Laravel.

edited Apr 08 '17 at 12:44

answered Apr 08 '17 at 12:39

Gabriel Robert

3,012
2
18
36

1

Where does OP mention Laravel? – Phil May 02 '17 at 00:48
1

@Phil I looked his previous posts and array of technologies. The accepted answer is also for Laravel. – Gabriel Robert May 02 '17 at 12:29

score 0 · Accepted Answer · answered May 02 '17 at 00:42

0

Here is what I did

Route::get('/stats', 'HomeController@home');

answered May 02 '17 at 00:42

Léo Coco

4,022
11
52
97

Vue Router: URL does not load correct component while router-link does

app.js:

3 Answers3