20240115收获

最近状态一直没调整好。

vue的.native事件修饰符

，一般用在组件的事件绑定上，像elementUI定义的组件，因为像click这一类原生事件只能绑定在普通的标签上，如div,span这些，组件上面绑定事件遵照的规则和原生的不同，只有组件的子组件也定义了相应的事件，比如我们在父组件身上写@click="handleClick"，那么子组件也要有一个this.$emit('click',参数),这样父组件的click才能有作用。

所以想让click这类事件在组件身上生效，要么组件内置的子组件有自定义对应的事件，要么通过.native这个修饰符，这个修饰符实际上的作用就是在父组件的下一层子组件身上添加了对应的事件。

路由

路由跳转的代码是this.$router.push(地址)

我们获得当前的url的代码是this.$route.fullpath，因为是当前路由而不是整个路由器，所以比上面少个r

我们获得当前url的?后面的地址的代码是this.$route.query。

在路由拦截的时候，我们经常会用到to.path来判断路由，这时候即使有query，也能够排除其影响，就比如我们的逻辑是，如果前往login页面，则xxx，此时就可以写成

if(to.path === '/login'){}这样的代码

回看的时候，我发现这个to.path和this.$route.path写法一致，是不是to就相当于当前要去的路由，我试了下，果然

代码错误

    logout() {
      //这里一定要注意，以为路由拦截的时候是对token进行判断，所以此时我想要跳转路由的时候，我得先清除token
      this.$store.commit('user/removeToken')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }

上面这里的代码顺序要注意，得先清除token，即先满足我自己预设的条件。

        //如果验证成功，则跳转页面,这里的地址是根据logout时url的?redirect=xxx这一些来的
        if(this.$route.query?.redirect){
        this.$router.push(this.$route.query.redirect)
        }else{
        this.$router.push('/')
        }

这里代码的错误在于，忘记思考redirect这个属性不存在的情况了，想直接根据query的值去做跳转，忽略了如果没有query值呢，route是肯定有query这个属性的，query有可能会没有id这个属性，所以要写成this.$route.query?.redirect所以原本的条件不能删除，query跳转的新增像是打的一个补丁，得在原有的基础上去思考，既要保留原有的跳转条件，又要考虑在原有条件下如果query下面没有值，该怎么办。

刚刚在回顾自己之前写的收获的时候发现一个细节，总结一下

this.$router获得路由器

this.$route获得当前页面的路由，和url差不多的东西

this.$router.options.routes获得路由的规则。

这仨可以稍微区分记忆一下。