vue路由跳转问题?router-view必须出现在 app.vue中么?

  1. 场景是这样子的,我再app.vue中写了一个登录框,然后根据返回值权限不同跳转不同页面

    <div class='login-container'>
      <el-form  :model="formInline" class="demo-form-inline" label-position='left'  label-width='80px'>
        <el-form-item label="用户名">
          <el-input v-model="formInline.user" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formInline.user" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit"  >登录</el-button>
        </el-form-item>
      </el-form>
    </div>

onSubmit

    onSubmit(){
      // 后端请求判断
      if(user1){
        this.$router.push({ path: '/User1' })
      }
      if(user2){
        this.$router.push({ path: '/User1' })
      }

    },

路由文件

    {
        path:'/User1',
        name:'User1',
        component:User1
    },
        {
        path:'/User2',
        name:'User2',
        component:User2
    }

问题是我如果在app.vue中加了<router-view></router-view>,都会跳转但是表单还在那个页面,就是app.vue中既有表单页面,又有user1页面

有没有办法直接让跳转到user1页面不出现表单,那么<router-view>应该加在哪里?

回答:

对于这个你理解错了:
1、<router-view>仅为一个容器,用于展示内容的,不应该在application页面写登录逻辑,就把<router-view>写上便好;
2、新建一个用于登录的模板,并把其加入路由中,使其成为application中<router-view>的默认视图,这样在通过登录的用户跳转不同的路由才是好的

回答:

path: '/User1'这么着会跳转一级路由。
所以你的登录页也应该放在一级路由里。
这样路由跳转的时候才会被替换掉。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注