Utiliser useRoute dans Vue3 composable

Question

J'ai un magasin de fichiers/service.js et je souhaite utiliser un routeur.

Je fais ceci :

import { useRoute } from 'vue-router';
const router = useRoute();
function exceptionHandler(error) {
  if (error.response.status === 401) {
    router.push('/user/login');
  } else if (error.response.status === 404) {
    throw new Error(error.response.data.Message || error.message);
  } else {
    router.push('/error');
  }
}

Mais je reçois une erreur non définie lors de l'utilisation de Router.

Remarque : ce n'est pas dans la balise de configuration, il s'agit d'un fichier externe js

Answer 1

useRoute() ne peut être utilisé que dans les paramètres, alors essayez d'écrire la fonction sous forme de composable comme celui-ci

import { useRoute } from 'vue-router';

export function useExceptionHandler(){

const router = useRoute();

function exceptionHandler(error) {
  if (error.response.status === 401) {
    router.push('/user/login');
  } else if (error.response.status === 404) {
    throw new Error(error.response.data.Message || error.message);
  } else {
    router.push('/error');
  }
}
    return {
        exceptionHandler,
    }
}

Vous pouvez l'utiliser sur votre composant comme ceci

<script setup>

const { exceptionHandler } = useExceptionHandler();

</script>