"Nuxt.js：使用URL傳遞ID"

Question

我想要取得使用者ID，所以我有一個下拉按鈕=

<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"
    >
      清單
    </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>

和這個數據:

<script>
export default {
  data: () => ({
      items: [
      {
        title: '使用者列表',
        url: '`/user/function/listUser/${route.params.id}`'
      },
      {
        title: '使用者結構',
        url: '`/user/function/structUser/${route.params.id}`'
      }
    ]
  })
}
</script>

我的意圖是發送用戶ID。這樣，我實際上可以透過route.params.id獲得

url: '`/user/function/structUser/${route.params.id}`'

不起作用，我做錯了什麼？

Answer 1

1. 範本字串只使用反引號，但你的字串同時使用了單引號和反引號。

2. 替換值（route.params.id）引用了一個在你的範例中似乎未定義的route變數。我認為你想要訪問this.$route，所以實際的替換應該是this.$route.params.id

#items陣列應該像這樣：

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}`
        }    
      ]
    }
  }
}

示範

Answer 2

這是一個例子

`/user/function/structUser/${this.$route.params.id}`

另外，也許嘗試在一個computed中使用它，因為它可能不是計算屬性。