I am having issues with Vue Router. I'm new so forgive me for any obvious mistakes how I've been searching around for similar issues and even read the Vue-Router guide however nothing stands out as being wrong.

I have a list of top-level routes (/, /tags, /people, etc.) which have all worked fine. The /tags route for example will just show a page listing all the tags and I want have each one link to its own page for editing, so that's what I've setup:

<router-link :to="`/tags/${tag.id}`" v-text="tag.name" />

I've omitted the other top-level routes from my routes file code below so as not to clutter anything.

// @/router/index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Tags from '@/views/Tags/index.vue'
import SingleTag from '@/views/Tags/Single.vue'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/tags',
        name: 'Tags',
        component: Tags,
    },
    {
        path: '/tags/:id',
        name: 'Tags',
        component: SingleTag,
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router

As you can see here, I've created a separate route with accepts an id. This matches the router-link above, however nothing works. It just lists the Tags component instead. If I swap the order of these two routes, I just a bunch of warnings in console such as:

No match found for location with path "/tags/13"

As I would prefer to have the specific id route as a child of the listing page, that's what I had tried first, but this just has the same issue as the routes as they're listed above.

Now what I did manage to get working is by changing the specific id route to /tag/:id instead, however I don't want that if possible. I want to keep it as /tags/:id and have it as a child of the main one. Is this going to be possible or am I forced to keep it as /tag/:id?