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

Posted 2022-11-26 zhangwq103

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>