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
– thanksd, Commented Apr 7, 2017 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
– Léo Coco, Commented Apr 7, 2017 at 16:35
Yes I do. When I'm clicking on a <router-link> in my code I'm well redirected to my component. I updated the app.js file — Léo Coco
– Léo Coco, Commented Apr 7, 2017 at 17:08
What's the generated URI when you click on the link? Did you disable the # when instantiating the router? — tiagojpdias
– tiagojpdias, Commented Apr 7, 2017 at 17:20

Community · Accepted Answer · 2017-05-23 12:09:57Z

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, 2017 at 12:09

CommunityBot

11 silver badge

answered Apr 7, 2017 at 19:11

Robert Nagy

713 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Léo Coco Over a year ago

This does not work, the URL is changed to / and then the App component is loaded

Gabriel Robert · Accepted Answer · 2017-04-08 12:44:28Z

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 8, 2017 at 12:44

answered Apr 8, 2017 at 12:39

Gabriel Robert

3,0902 gold badges21 silver badges38 bronze badges

2 Comments

Phil Over a year ago

Where does OP mention Laravel?

Gabriel Robert Over a year ago

@Phil I looked his previous posts and array of technologies. The accepted answer is also for Laravel.

Léo Coco · Accepted Answer · 2017-05-02 00:42:43Z

0

Here is what I did

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

answered May 2, 2017 at 0:42

Léo Coco

4,31213 gold badges60 silver badges101 bronze badges

Collectives™ on Stack Overflow

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

app.js:

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

app.js:

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related