[外门弟子]JS-1|2019年12月22日的日报-技能树.IT修真院

发表于： 2019-12-22 00:08:56

1 1185

今天完成的事情：

首先是vue的跨域问题吧，上午调试了两个小时一直得不到正确的值，然后沟通师兄之后认定是接口的问题，接口返回值出现问题了，一直返回登录失败。

配置方便的话axios可以调用一个then的方法，这个方法里面可以传递一个回调函数，表示如果通信成功了要执行的操作，

SignInclick() {
      let mydata = {
        name:this.username,
        pwd:this.password
      }
      axios.post('/api/a/login',qs.stringify(mydata))
      .then(res => this.ResponseText = res.data.message)//如果通过调用 回调函数的方式来写这一部分会导致this指向错误。this会被指向undefine，而箭头函数则不同，箭头函数不是函数调用，this指向的是调用它的对象
    }

用应为涉及到一个逻辑，如果通信message为success则this.$router.push()导入后台对应的路由，如果是别的值则更新到登录页面的窗口上。

然后就是学了路由守卫，以及keep-alive

路由守卫又分为，全局的路由守卫和单个的路由守卫

全局的直接在index.js下面通过router对象然后调用aftereach和beforeeach这两个方法，然后里面对应一个回调函数，回调你函数都需要传入参数，beforeeach需要三个参数：to from next,并且在待用该方法事还需要调用next函数同时next函数还可以传入其他的参数，指定下一步需要执行的命令。

router.beforeEach((from,to,next) => {
  //to.meta
  next()
})

然后to在这里面就相当于route我们可以通过to.XXX获取内部的路由路径或者通过路由传递参数。

然后单个路由守卫的用法也很简单，也就是路由独享守卫，在配置路由的地方加上beforeEnter然后传入to，from，next三个参数就好了。

还有就是实现一个功能：

输入用户名，然后再后台页面显示用户名的地方显示当前用户的用户名，用的事路由之间传值query方法

:to="{path:'/backstage',query:{username:username,}}" 

先在data(){}函数里面声明username并赋值，然后通过之前绑定给输入框的v-model赋值然后通过v-bind绑定给登录按钮，把to写成对象的形式，然后里面可以声明path，然后把query也写成对象形式以用来传递多个值。

明天要做的事情：
继续任务6的实现，边做边学查漏补缺吧

返回列表

【任务5】 [外门弟子]JS-1 | 2019年12月22日 的日报 中品

评论

分享到

【任务5】 [外门弟子]JS-1 | 2019年12月22日的日报中品