Nuxt js id through url - vue.js

Question

I want to get ID user, so I have a button DropDown=
<v-menu
transition="slide-y-transition"
bottom
offset-y
>
<template v-slot:activator="{ on, attrs }" >
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
List
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(item, index) in items"
:key="index"
:to="item.url"
>
<v-list-item-title>{{item.title}}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
and this data:
<script>
export default {
data: () => ({
items: [
{
title: 'List User',
url: '`/user/function/listUser/${route.params.id}`'
},
{
title: 'structure User',
url: '`/user/function/structUser/${route.params.id}`'
}
]
})
}
</script>
My intention is to send user ID. This way, I can get with route.params.id actually
url: '`/user/function/structUser/${route.params.id}`'
is not working, what I'm doing wrong?

Answer 1

This this one
`/user/function/structUser/${this.$route.params.id}`
Also, maybe try this one in a computed because it may not be computed.

Answer 2

Template strings use backticks only, but yours are using both single quotes and backticks.
The substitution value (route.params.id) refers to a route variable that appears to be undefined in your example. I believe you're trying to access this.$route, so the actual substitution should be this.$route.params.id
The items array should look like this:
export default {
data() {
return {
items: [
{
title: 'List User',
url: `/user/function/listUser/${this.$route.params.id}`
},
{
title: 'structure User',
url: `/user/function/structUser/${this.$route.params.id}`
}
]
}
}
}
demo