5
votes

Comment utiliser le routeur dans l'API de composition vue?

J'ai défini un itinéraire en vue:

<template>
  <div>{{username}}</div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, getCurrentInstance } from '@vue/composition-api';

export const useUsername = ({ user }) => {
  return { username: user.name };
};

export default defineComponent({
  setup(props, { root }) {
    const vm = getCurrentInstance();

    const userToLoad = computed(() => root.$route.params.userId);
    const listOfUsers = [
      { userId: 1, name: 'user1' },
      { userId: 2, name: 'user2' },
    ];

    const user = listOfUsers.find((u) => u.userId === +userToLoad.value);
    if (!user) {
      return root.$router.push('/404');
    }

    const { username } = useUsername({ user });

    return { username };
  },
});

</script>

Quel point à UserComponent:

<template>
 <div>{{username}}</div>
</template>

et j'utilise computed partir de @vue/composition-api pour obtenir les données.

le problème est lorsque la route passe à un autre userId , en accédant à un autre utilisateur, l'utilisateur dans le modèle html n'a pas changé comme je m'y attendais. il ne redirige pas non plus lorsque l'utilisateur n'est pas dans la liste.

Alors, que puis-je faire pour résoudre ce problème?

voici mon code:

/users/:userId

vue.js

0 commentaires

3 Réponses :

-1
votes

Ajoutez s'il vous plaît ce code: watchEffect (() => userToLoad);

0 commentaires

1
votes

Vous pouvez transmettre les paramètres comme accessoires à vos composants. Les accessoires sont réactifs par défaut.

Voici à quoi pourrait ressembler la configuration de l'itinéraire:

<template>
  <div>{{username}}</div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, getCurrentInstance, watchEffect } from '@vue/composition-api';

export const useUsername = ({ user }) => {
  return { username: user.name };
};

export default defineComponent({
  props: {userId: {type: String, required: true },
  setup(props, { root }) {
    const vm = getCurrentInstance();
    const user = ref()

    const userToLoad = computed(() => props.userId);
    const listOfUsers = [
      { userId: 1, name: 'user1' },
      { userId: 2, name: 'user2' },
    ];

    watchEffect(() => user.value = listOfUsers.find((u) => u.userId === +userToLoad.value))
    
    if (!user) {
      return root.$router.push('/404');
    }

    const { username } = useUsername({ user });

    return { username };
  },
});

</script>

Vous pouvez ensuite utiliser les accessoires de votre composant avec watchEffect()

      {
        path: '/users/:userId',
        name: Users,
        component: YourComponent
      },

watchEffect() s'exécutera immédiatement une fois défini et lorsque les dépendances réactives seront watchEffect()

0 commentaires

1
votes

Vous pouvez simplement faire ceci:

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    // Now you can access params like:
    console.log(route.params.id);
  }
};

0 commentaires