背景

某功能页面下线，需要提供一个弹窗来提示用户该功能已下线
要求：弹窗只是在进入该页面的时候显示，切换其他的页面再回到该页面，弹窗不显示，即弹窗只在第一次点击该功能页面出现

实现思路

1. 弹窗：element-ui或者antd中的dialog，参考官方api即可
2. 弹窗只出现一次，使用sessionStorage去控制dialog的visible

实现代码

1. 在入口文件中定义并设置sessionStorage

const sessionStorage = window.sessionStorage;
sessionStorage.setItem('dialogVisible', 1);

1. 定义dialog

<el-dialog
   title="提示"
   :visible.sync="dialogVisible"
   show-close
   width="30%"
   center
>
   <span>内容分析已于2020-12-15日停止维护，需要继续使用该功能，可以跳转至内容中台，辛苦老铁！</span>
   <p>内容中台地址：<a href="https://k-content.corp.kuaishou.com/#/?queryType=DEVICE" class="alink">https://k-content.corp.kuaishou.com/#/?queryType=DEVICE</a></p>
   <span slot="footer" class="dialog-footer">
       <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
   </span>
</el-dialog>

1. 通过sessionStorage控制dialog
   dialogVisible的初始值设为false，判断sessionStorage的值，如果==1，则显示对话框，并且sessionStorage设为0，如果sessionStorage不为1就直接将对话框设置为false
   这里注意，sessionStorage设置的值会默认为string类型的，所以不能将sessionStorage的值直接赋值给dialogVisible，否则dialogVisible的值永远都是true

mounted() {
    if(sessionStorage.getItem("dialogVisible") == 1){
        this.dialogVisible = true;
        sessionStorage.setItem("dialogVisible", 0);
    } else {
        this.dialogVisible = false;
    }
},