根据响应在 vue 中重定向

Posted 2023-03-10

【中文标题】根据响应在 vue 中重定向

【英文标题】：Redirect in vue based on a response

【发布时间】：2018-10-10 22:35:49

【问题描述】：

所以我尝试根据谁正在登录来加载客户端仪表板或管理仪表板。这是我第一次接触 Vue，所以我不能 100% 确定这甚至可能，但我想是否有人知道是你们这里的人。所以这是我的代码：

export default 
    data () 
      return 
        model: 
          email: '',
          password: '',

        ,
        modelValidations: 
          email: 
            required: true,
            email: true
          ,
          password: 
            required: true,
            min: 5
          
        ,
      
    ,
    methods: 
      getError(fieldName) 
        return this.errors.first(fieldName)
      ,
      validate() 


          let login = this;
          this.$auth.login(
            params: 
              email: login.model.email,
              password: login.model.password
            ,
            success: function (response)
              console.log(response);
              let id = response.data.userinfo.id;
            ,
            error: function (error)  
              console.log(error); 
            ,
              // rememberMe: true,
              // fetchUser: true,
          ).then(function(id) 
            if (id ==1) 
              this.$router.push('/admindashboard');
             else 
              this.$router.push('/clientdashboard');
            
          );
      
    

【问题讨论】：

您目前看到的行为是什么？

【参考方案1】：

您的路由器应该可以正常工作，除非您输入了错误的名称/路径。

下面是Vue-Router: Programmatic Navigation 上的一个简单示例：

let UserView = Vue.component('user', 
  template: '<div>I am User</div>'
)

let AdminView = Vue.component('admin', 
  template: '<div>I am Admin</div>'
)

const router = new VueRouter(
  routes: [
    
      path: '/Admin',
      name: 'Admin',
      component: AdminView
    ,
    
      path: '/User',
      name: 'User',
      component: UserView
    
  ]
)
Vue.use(VueRouter)
app = new Vue(
  el: "#app",
  router,
  data: 
    isAdmin: true,
    loading: ''
  ,
  methods: 
    goNextView: function () 
      this.loading = 'Loding View...'
      setTimeout( ()=> 
        this.isAdmin = !this.isAdmin
        if(this.isAdmin)
          this.$router.push(name: 'Admin', path: '/Admin')
         else 
          this.$router.push(name: 'User', path: '/User')
        
        this.loading = ''
      , 1000)
    
  
)

.loading 
  background-color:red;
  font-weight:bold;

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
    <h2>Test Vue Router</h2>
    <p>Current Auth: isAdmin ? 'Admin' : 'User'</p>
    <button @click="goNextView()">Go to Next View</button>
    <p class="loading" v-if="loading">loading</p>
    <router-view></router-view>
</div>