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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 838 天前的主题，其中的信息可能已经有所发展或是发生改变。

下面是我写的一个 demo

App.vue 文件

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

<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？

第 1 条附言 · 2022-08-08 19:57:53 +08:00

页面

template

div

5 条回复 • 2022-08-09 16:02:33 +08:00

Danswerme

2022-08-08 19:23:02 +08:00

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

rodrick

2022-08-08 19:29:08 +08:00

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

tyx1703

2022-08-08 19:31:14 +08:00

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

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

yezheyu

2022-08-08 21:23:27 +08:00 via iPhone

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

daolanfler

2022-08-09 16:02:33 +08:00

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