"Nuxt.js : Passer l'ID à l'aide de l'URL"

Question

<template v-slot:activator="{ on, attrs }" > <v-btn couleur = "primaire" sombre v-bind="attrs" v-on = "on" > 列表 ≪/v-btn> </modèle> <liste-v> <v-list-item v-for="(élément, index) dans les éléments" :key="index" :to="item.url" > <v-list-item-title>{{item.title}}</v-list-item-title> </v-list-item> </v-list> </v-menu> ≪/pré> <p>和这个数据 :</p> <pre class="brush:html;toolbar:false;"><script> exporter par défaut { données : () => ({ articles: [ { titre : '用户列表', URL : ''/user/function/listUser/${route.params.id}`' }, { titre : '用户结构', URL : ''/user/function/structUser/${route.params.id}`' } ] }) } </script> ≪/pré> <p> <pre class="brush:js;toolbar:false;">url : '`/user/function/structUser/${route.params.id}`' ≪/pré> <p>不起作用，我做错了什么？</p>

Answer 1

1. La chaîne du modèle utilise uniquement des backticks, mais votre chaîne utilise à la fois des guillemets simples et des backticks.

2. Valeur de remplacement (route.params.id）引用了一个在你的示例中似乎未定义的route变量。我认为你想要访问this.$route，所以实际的替换应该是this.$route.params.id

itemsLe tableau devrait ressembler à ceci :

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

Démo

Answer 2

Ceci est un exemple

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

Essayez peut-être également de l'utiliser dans un computed car ce n'est probablement pas une propriété calculée.