A brief analysis of how to use useRouter outside Vue components in Vue3

useRouter is a hook in the Vue 3 Composition API, which can only be used in Vue components, not in normal JavaScript modules or tool functions.

In order to use routers in an interceptor, you need to get the router instance in the Axios response interceptor. You can solve this problem in two ways:

Scheme 1: Pass the router as a parameter to the interceptor

A common solution is to pass the router as a parameter to where you need to use it when setting up an Axios instance. You can store the router instance through the global state of Vue (such as Vuex or Pinia) and then use it in the interceptor.

step:

1. Pass router in the main application:

You can get a router instance in the main component of your Vue app (such as ) and store it in Vuex or Pinia.

2. Use router in Axios:

You can access the stored router instance in the response interceptor and then route the route.

Example implementation:

Store router instances in or Pinia:

(Suppose you use Pinia or Vuex to manage global state)

In Pinia, define a variable to store router

// Used to store router instances  let router  =ref(null)

In the lieutenant store, save the router:

Assign values to variables defined in Pinia

import { useRouter } from 'vue-router'
const router = useRouter()

const appStore = getAppStore()
 = router

Modify the Axios configuration file and use the stored router instance:

import axios from 'axios'
import { getAppStore } from '../store'
import { showDialog } from 'vant'
import { useRouter } from 'vue-router';
const router = useRouter()

const sender = ({
  baseURL:  ? .VITE_API_TARGET : 'api',
  headers: {
    'Content-Type': 'application/json'
  }
});

const appStore = getAppStore()
// const router = useRouter()
// Add a request interceptor// /zh/docs/interceptors
(function (config) {
  // ('Request Interceptor')  // Add token request header uniformly  ['Authorization'] = 
  return config;
}, function (error) {
  // ('Request interceptor error: ', error)  // What to do about the request error  return (error);
});

// Add a response interceptor(function (response) {
  // ('Response Interceptor', response)  // The status codes in the range 2xx will trigger this function.  // Do something about the response data   = false
  if () {
     = 
    // ('update token '+)
  }

  return 
}, function (error) {
  // ('Response interceptor error: ', error)  // Status codes outside the 2xx range will trigger this function.  // Do something to respond to errors   = false
  if ( === 401) {
     = false
     = ''
    const router = ;
    ('/login')
  }

  if ( === 422) {
    showDialog({
      teleport: '#main',
      className: 'global-dialog',
      showConfirmButton: false,
      closeOnClickOverlay: true,
      message: 
    })
  }
  return (error)
});

export const send = sender

Solution 2: Expose router via window or global

If you do not want to use global state management, you can also temporarily store router instances through global objects (such as window). Although this is not very recommended, it can also achieve the requirements.

Example implementation:

1. Expose the router to the window in :

// 
import { createApp } from 'vue';
import App from './';
import { createRouter } from 'vue-router';
import { routes } from './router';

const router = createRouter({
  history: createWebHistory(),
  routes,
});

// Expose router instance to window object = router;

const app = createApp(App);
(router).mount('#app');

2. Use it directly in Axios configuration:

// 
import axios from 'axios';
import { showDialog } from 'vant';

const sender = ({
  baseURL:  ? .VITE_API_TARGET : 'api',
  headers: {
    'Content-Type': 'application/json',
  },
});

// Add a request interceptor(function (config) {
  // ...Request interception logic  return config;
}, function (error) {
  return (error);
});

// Add a response interceptor(function (response) {
  // ...Response interception logic  return ;
}, function (error) {
  // Use to make routing jump  if ( === 422) {
    const router = ;
    if (router) {
      ('/login');
      showDialog({
        teleport: '#main',
        className: 'global-dialog',
        showConfirmButton: false,
        closeOnClickOverlay: true,
        message: ,
      });
    }
  }

  return (error);
});

export const send = sender;

Summarize

The best way is to store router instances through global state management, such as Pinia or Vuex, which ensures that the router instance is properly retrieved anywhere you need to use it without having to rely on windows or global objects. Also, avoiding exposing routers directly to the global world can keep the code modular and clear.

This is the article about how to use useRouter outside the Vue component in Vue3. For more related Vue3 useRouter content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!