怎么用vue实现一个登录跳转的功能

标签：点击   script   template   data   stat   服务器   export   class   json   

1.template里面先把你自己想写的静态页面写好，哪点想点击转换登录，哪点绑定click事件

<template>
    <div :class="$style.wrapper">
        <!--        <img class="" src="img/5.jpg"/>-->
        <img :class="$style.imger" src="img/1.png"/>
        <img :class="$style.imger" src="img/2.png"/>
        <img :class="$style.imger" src="img/3.png"/>
        <img :class="$style.imger" src="img/4.png"/>
        <img :class="$style.buttoner" src="img/button.png" @click="onJump">
    </div>
</template>

2.开始写登录跳转逻辑

<script>
  const projectPath = ‘#‘ // 项目路径，以/开头，结尾不含/，自己项目服务器的路径

  export default {
    data () {
      return {
        userNo: ‘‘,
        loginStatus: false
      }
    },
    methods: {
      // 登录方法
      login () {
        CommonKit.login.status(projectPath).then(json => {
          // 判断登录状态
          if (json.status) {
            this.loginStatus = true
          } else {
            this.loginStatus = false
          }
        })
      },

      // 页面跳转
      onJump () {
        if (this.loginStatus) {
          // 已经登录，跳转指定链接
          window.location.href = ‘#‘
        } else {
          // 没有登录则登录
          CommonKit.login.login(projectPath)
        }
      }
    },
    mounted () {
      this.login()
    }
  }

</script>

怎么用vue实现一个登录跳转的功能

标签：点击   script   template   data   stat   服务器   export   class   json   

原文地址：https://www.cnblogs.com/zhangwq103/p/11573763.html