element ui 退出功能

<template>



      <el-container class="home-wrapper">
            <el-header>
                  <el-row type="flex" class="row-bg" justify="space-between">
                        <el-col :span="4">Smile</el-col>
                        <el-col :span="4" class="header-font">后台系统管理</el-col>
                        <el-col :span="1" class="header-logout"><a href="#" @click.prevent="logout" >退出</a></el-col>
                  </el-row>
            </el-header>
             <el-container>
                  <el-aside width="15%">Aside</el-aside>
                  <el-main  >Main</el-main>
            </el-container>
      </el-container>
      



</template>>

<script>
import { constants } from 'crypto';
export default {
      data(){
            return{

            }
      },
      methods:{
          logout(){//退出功能
            //弹出确认对话框
            //用户点击确认，跳回用户登录页面，清除token
                this.$confirm('确定要退出登录吗?', '提示', {
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning'
                  }).then(() => {
                    this.$message({
                       type: 'success',
                       message: '退出成功!'
                     });
                     //确认退出，清除token
                     localStorage.removeItem('token')
                     //跳转登录页面(编程式导航)
                     this.$router.push('/login')

                }).catch(() => {
              this.$message({
               type: 'info',
               message: '已取消退出'
          });          
        });

          } 
      }
}
</script>>

<style scoped lang='less'>

  .home-wrapper {
    min-width: 720px;
    height: 100%;
    
 
    .el-header{
        background-color:#222d32;
        color: #fff;
        text-align: center;
        line-height: 60px;
        padding: 0;
    }
    .header-font{
        color: #fff;
        font-size: 20px;
    }

    .header-logout a{
      font-size:14px;
      color: #fff;
    }
   a{
     text-decoration: none;
   }

  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }


}

</style>>