Verwendung von useRoute in Composable Vue3

Question

Ich habe eine Datei „store/service.js“ und möchte einen Router verwenden.

Ich mache das:

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');
  }
}

Bei der Verwendung von Router wird jedoch der Fehler „undefiniert“ angezeigt. Hinweis: Dies befindet sich nicht im Setup-Tag, es handelt sich um eine externe js-Datei

Answer 1

useRoute() 只能在设置内部使用，因此请尝试将函数编写为像这样的可组合项

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,
    }
}

你可以在你的组件上像这样使用它

<script setup>

const { exceptionHandler } = useExceptionHandler();

</script>