I think the best way is to use the meta of your route. This way, the solution is reusable in other contexts and not specific to the login route.

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Header,
      meta: { hideHeader: true }
    }
  ]
})

and add a v-if with !route.meta.hideHeader

<script setup>
    import { useRoute } from "vue-router";
    let route = useRoute();
</script>

<template>
  <header v-if="!route.meta.hideHeader">
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="Knowledge Base System for IFIC Bank" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/login">login</RouterLink>
      </nav>
    </div>
  </header>
</template>

<script>
import { useRoute } from "vue-router";
export default {
  setup() {
    let route = useRoute();
    return { route };
  }
};
</script>

or setup

<script setup>
import { useRoute } from "vue-router";
let route = useRoute();
</script>

And then your template

<template>
  <header v-if="route.path !== '/login'">
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="Knowledge Base System for IFIC Bank" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/login">login</RouterLink>
      </nav>
    </div>
  </header>

<RouterView/>

Use useRoute, return it in your setup function.

Now you can use route.path and an v-if

You could extract the header into a component and pass it down into the other components. There you could either use the header component or not.