Vue3基础(21)___在axios.js中使用路由跳转

在vue2中我们只需要引入main.js即可获取this实例，直接

this.$router.push('/login')

首先在vue3中我们使用comAPI，但是在自己封装的js里面，我们不能使用useRouter ,useRoute，他们需要在setup中调用执行后才能用，于是给出解决办法：
直接使用router实例：

    import axios from 'axios'
    import { ElMessage } from "element-plus";
    import router from '../../router'
    let Ajax = axios.create({
        baseURL: "http://127.0.0.1:3003/",
        timeout: 5000
    })
    Ajax.interceptors.response.use(response => {
        if (response.data.data.code == 2) {
            ElMessage(response.data.data.data)
            router.push('/login')
            localStorage.removeItem('username')
            return []
        }
        return response.data;
    }, error => {
        return Promise.reject(error);
    });

    const get = (url, params) => {
        Ajax.defaults.headers['token'] = localStorage.getItem('token')
        return new Promise((relove, reject) => {
            Ajax.get(url, { params }).then(res => relove(res)).catch(err => reject(err))
        })
    }
    const post = (url, params) => {
        Ajax.defaults.headers['token'] = localStorage.getItem('token')
        return new Promise((relove, reject) => {
            Ajax.post(url, params).then(res => relove(res)).catch(err => reject(err))
        })
    }
    export default {
        get, post
    }

核心：

import router from '../../router'
router.push('/login')

router文件下的index.js文件就是我们的路由实例。
我们的路由文件：

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        //主页面
        {
            path: "/home",
            component: () => import('../views/home.vue'),
            redirect: '/home/userlist',
            children: [
                {
                    path: 'userlist',
                    component: () => import('../components/userlist.vue')
                },
                {
                    path: 'userinfo',
                    component: () => import('../components/userinfo.vue')
                },
            ]
        },
        //登录页面
        {
            path: "/login",
            component: () => import('../views/login.vue')
        },
        //直接报错
        // {
        //     path: "*",
        //     redirect: "/login"
        // },
        //正确写法：
        //1
        // {
        //     path: "/:catchAll(.*)",
        //     redirect: "/login"
        // },
        //2
        // {
        //     path: "/:pathMatch(.*)*",
        //     redirect: "/login"
        // },
        //3
        {
            path: "/:pathMatch(.*)",
            redirect: "/login"
        },


    ],
})
export default router