V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yezheyu
V2EX  ›  程序员

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

  •  
  •   yezheyu · 2022-08-08 18:58:39 +08:00 · 1598 次点击
    这是一个创建于 824 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    第 1 条附言  ·  2022-08-08 19:57:53 +08:00
    login 组件上点击事件的方法名忘了改,别介意
    5 条回复    2022-08-09 16:02:33 +08:00
    Danswerme
        1
    Danswerme  
       2022-08-08 19:23:02 +08:00   ❤️ 1
    App.vue 里面不应该是<router-view />吗? 没有这个组件,你的路由就不会生效,无论访问什么路径都是 App.vue 里面的内容。
    rodrick
        2
    rodrick  
       2022-08-08 19:29:08 +08:00
    我感觉你可能是因为没有区分清楚路由和页面和组件的关系 路由的改变 要用 <router-view />来告诉 vue 路由改变的时候 是哪块的组件需要有变化 路由改变并不是整个页面的替换
    tyx1703
        3
    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
        4
    yezheyu  
    OP
       2022-08-08 21:23:27 +08:00 via iPhone
    @tyx1703 多谢老哥,是我想歪了
    daolanfler
        5
    daolanfler  
       2022-08-09 16:02:33 +08:00
    vue-router 通过 url 找到指定的组件,在 router-view 里面去渲染。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1644 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 16:50 · PVG 00:50 · LAX 08:50 · JFK 11:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.