Dynamic route with static part possible?

[michaelpumo]

Is it possible to have a dynamic route with a static part to it?

e.g. /@[handle].vue

When I do this, it doesn't work and instead falls back to my catch-all route [...all].vue

I don't want to put it in a sub-folder, I'd like the @ symbol followed by whatever comes after being a dynamic username.

I managed to do this in another application but not sure how to achieve the same thing in folder-based routing. Sorry if I'm being a bit dumb.

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      children: [
        {
          path: '/@:handle',
          name: 'Profile',
          component: () => import('../views/Profile.vue'),
          props: true,
        },
      ],
    },
  ]
})

[leosin]

I used it this way

in list page/pages/list.vue

...
<li v-for="(item, index) in data" :key="index" >
  <router-link :to="{name:'demo-post-detail',params:{id:`id_${item.id}`}}">
       {{ item.title }}
  </router-link>
</li>

in detail page /pages/[id].vue

const id = route.params.id.slice(3) // id_23, Use slice or other methods to remove the preceding string

getPostById(id).then((res) => {
  detail.value = res
})