overlapping in defining routes in nuxtjs router

[kazem2020]

Version 1.5.0

I'm trying to develop a blog with nuxtjs. But I have problem with routing.
I define this route localhost/@:username/:slug to show a post. also I want to have these routes:
localhost/@:username/edit, localhost/@:username/posts, localhost/@:username/followers, ...

But it makes disturbance, and all of them route to show post page.

my router:

import Vue from 'vue';
import Router from 'vue-router';
import {scrollBehavior} from '~/utils';

Vue.use(Router);

const page = path => () => import(`~/pages/${path}`).then(m => m.default || m);

const routes = [
    {
    path: '/@:username',
    component: page('user/profile/index.vue'),
    children: [
        {path: '', name: 'profile', component: page('user/profile/profile.vue'),},
        {path: 'edit', name: 'profile-edit', component: page('user/profile/edit.vue')},
        {path: 'following', name: 'profile-following', component: page('user/profile/following.vue')},
        {path: 'followers', name: 'profile-followers', component: page('user/profile/followers.vue')},
     ]
    },
    {path: '/@:username/:slug', name: 'post', component: page('site/posts/show-post.vue')},
];

export function createRouter() {
    return new Router({
        routes,
        scrollBehavior,
        mode: 'history'
    });
}

[zabavnikov]

Hello! I'm not quite sure about this, but any route in the child section matches the mask @:username/:slug and since it is the last in the list, show-post.vue is displayed on this.