vue-router sets wrong parameter after reloading

Question

I have

// routes.js
{ path: '/posts', name: 'Posts', component: PostsView },
{
    path: '/post/:post_id',
    name: 'PostRead',
    component: PostReadView,
},
{
    path: '/post/cu/:post_id?',
    name: 'PostCreateUpdate',
    component: PostCreateUpdateView,
},

// PostCreateUpdate.vue
mounted: function() {
    if( this.$route.params.post_id ) {
        this.$store.dispatch('getPost', this.$route.params.post_id);
    }
},

When I access the PostCreateUpdate via router-link like this

<router-link :to="{ name: 'PostCreateUpdate' }">Create</router-link>

It works with no problems as I see the parameter in the Vue Devtools isn't set, but when I access the URL by reloading or hard coding the url /post/cu/ the framework (I think) removes the trailing slash and treats cu as some /post/ parameter, thus, loading PostRead with post_id=cu and giving me something I don't want.

blex · Accepted Answer · 2020-07-04 22:16:09Z

2

You need to always declare your most restrictive URIs first. Order matters, because Vue Router will go through your routes, and pick the first one that matches.

Invert your /post/:post_id route and /post/cu/:post_id? one:

// routes.js
{ path: '/posts', name: 'Posts', component: PostsView },
{
    path: '/post/cu/:post_id?',
    name: 'PostCreateUpdate',
    component: PostCreateUpdateView,
},
{
    path: '/post/:post_id',
    name: 'PostRead',
    component: PostReadView,
},

edited Jul 4, 2020 at 22:16

answered Jul 4, 2020 at 22:10

blex

25.7k6 gold badges48 silver badges78 bronze badges

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

Collectives™ on Stack Overflow

vue-router sets wrong parameter after reloading

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related