在组合式 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>