Vue路由器-链路参数在嵌套循环中未定义

export default {
  data() {
    return {
      userId: null
    };
  },
  created() {
    this.userId = this.$route.params.id;
  }
};

export default {
  data() {
    return {
      userId: null
    };
  },
  watch: {
    '$route'(to, from) {
      this.userId = to.params.id;
    }
  },
  created() {
    this.userId = this.$route.params.id;
  }
};

export default {
  data() {
    return {
      userId: null
    };
  },
  created() {
    this.$nextTick(() => {
      this.userId = this.$route.params.id;
    });
  }
};

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ userId }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      userId: null
    };
  },
  watch: {
    '$route'(to, from) {
      this.userId = to.params.id;
    }
  },
  created() {
    this.fetchItems();
    this.userId = this.$route.params.id;
  },
  methods: {
    fetchItems() {
      // 假设这是一个API调用
      this.items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];
    }
  }
};
</script>