在組合式 Vue3 中使用 useRoute

Question

我有一個檔案 store/service.js，我想使用路由器。

我做這個：

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

但在路由器使用中收到未定義錯誤。

注意：這不是setup標籤內的，這是一個js外部檔案

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>