Menggunakan useRoute dalam Vue3 yang boleh digubah

Question

Saya mempunyai kedai fail/service.js dan saya mahu menggunakan penghala.

Saya melakukan ini:

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

Tetapi menerima ralat undefined semasa menggunakan Router.

Nota: Ini bukan dalam teg persediaan, ini adalah fail luaran js

Answer 1

useRoute() hanya boleh digunakan dalam tetapan, jadi cuba tulis fungsi sebagai boleh gubah seperti ini

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

Anda boleh menggunakannya pada komponen anda seperti ini

<script setup>

const { exceptionHandler } = useExceptionHandler();

</script>