Error redirecting user to login page with Vue 3

Question

good afternoon, I am getting the following error while trying to redirect the user to the login page, on Vue js 3 This page checks if the user has a token to see if they are logged in. If they are logged in, it displays their content normally. Otherwise, you should redirect to the login page. However, when trying to redirect to login, the above image error is shown.

I’ve never worked with Vuejs and I have that doubt.

Follow the codes:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";

import { clickOutsideDirective } from "./directives/outsideClickHandler";
import i18nPlugin from "./plugins/i18n/i18nPlugin";

import Axios from "axios";


import router from "./router";
import routerLogin from "./router/login"
//import routerLogin from "./routerAutenticacao"
//import routerLogin from "./router/login"

//var axiosIntance = Axios.create({ baseURL: "https://localhost:5001/" });
var axiosIntance = Axios.create({
    baseURL: store.getters.baseURL
});
// declare a response interceptor
axiosIntance.interceptors.response.use(
    (response) => {
        return response;
    },
    (error) => {
        if (error && error.response && error.response.status === 401) {
            localStorage.removeItem("user-token");
            window.location.reload();
        }
        return Promise.reject(error);
    }
);
const app = createApp(App);
app.config.globalProperties.$http = axiosIntance;

const token = JSON.parse(localStorage.getItem("user-token"));

if (token) {
    app.config.globalProperties.$http.defaults.headers.common["Authorization"] =
        "bearer " + token.token;
    app.config.devtools = true;
    app.config.globalProperties.$http = axiosIntance;
    app.provide("http", app.config.globalProperties.$http);
    console.log('autorizado');
    app.directive("click-outside", clickOutsideDirective);
    app
        .use(router)
        .use(store)
        .use(i18nPlugin, { locale: "br" })
        .mount("#app");
} else {
    console.log('não autorizado')
    app
        .use(routerLogin)
        .use(store)
        .use(i18nPlugin, { locale: "br" })
        .mount("#app");
    //window.location.href = ('/login.html');
}

Index.js

import { RouterView } from "vue-router";
//import Vue from 'vue'
//import Router from 'vue-router'
import { createRouter, createWebHashHistory } from "vue-router";
const Login = () =>
    import ("@/views/login/Login.vue");


const routes = {
    path: "/login",
    name: "Logar",
    component: RouterView,
    children: [{
            path: "",
            name: "Logar",
            component: Login
        },

    ]
};
const routerLogin = createRouter({
    history: createWebHashHistory(),
    routes,
});

export default routerLogin;

The error more precisely is on that Lse that leads to login but n know why

Answer 1

I managed to solve in a very simple way until I made the mount in #app and if the user has no token i pass router.push({ name: "Login" }) my login wheel