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

[yezheyu]

下面是我写的一个 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？

[Danswerme]

App.vue 里面不应该是<router-view />吗? 没有这个组件，你的路由就不会生效，无论访问什么路径都是 App.vue 里面的内容。

[rodrick]

我感觉你可能是因为没有区分清楚路由和页面和组件的关系 路由的改变 要用 <router-view />来告诉 vue 路由改变的时候 是哪块的组件需要有变化 路由改变并不是整个页面的替换

[tyx1703]

App.vue 是在项目的入口文件挂载的，而不是通过路由，因此项目中其他所有内容都将是 App.vue 的子元素。
你应该在 App.vue 的模板中只保留 vue-router 组件，然后给 / 路径指定另一个新的组件，比如 Home.vue 。


> 还有访问一个我没有在路由中配置的 url ，如 /home ，按理说是 404 ，但实际还可以访问 App.vue 的渲染的 /根页面，难道就不能限制 /完全只匹配 /，不去匹配 /home ，/user ？
如上所说，App.vue 是渲染并不受路由，即 vue-router 控制，因此，所有路径都将会渲染它的内容。

[yezheyu]

@tyx1703 多谢老哥，是我想歪了

[daolanfler]

vue-router 通过 url 找到指定的组件，在 router-view 里面去渲染。