Vue 新手上路，像请教个 vue-router 的问题

下面是我写的一个 demo

App.vue 文件

<template> <div>这是根页面</div> </template> 

Login.vue 组件

<template> <div>这是 login 页面</div> <button @click="login">login</button> </template> <script setup> import { useRouter } from 'vue-router'; const router = useRouter() const toHome = () => { localStorage.setItem('username', 'tom'); router.push('/') } </script> 

路由文件

const routes = [ { path: '/', redirect: () => { if(localStorage['username'] == 'tom'){ return '/' }else{ return '/login' } } }, { path: '/login', component: login }, ] 

我的本意是 login 页面因为没有任何复用的标签或组件，是完全独立于/根页面的，没登录跳转到 Login 组件，但当我访问localhost:3000时，我以为的页面是这样的

但实际渲染出来的页面是

为啥差别这么大呢，为啥根页面内容没被替换掉，login 页面的内容没渲染出来

首先项目自带的 App.vue 最终会渲染到于/根页面上，我没理解错吧？

为啥组件不能脱离 App.vue 渲染单独当做一个页面使用吗？只能使用<router-view/>或者<component is=''/>镶嵌在 App.vue 中使用吗？

还有访问一个我没有在路由中配置的 url ，如/home，按理说是 404 ，但实际还可以访问 App.vue 的渲染的/根页面，难道就不能限制/完全只匹配/，不去匹配/home，/user？