当前位置:首页 » 《随便一记》 » 正文

【自用】VUE 获取登录用户名 显示在其他页面上

4 人参与  2023年04月07日 13:47  分类 : 《随便一记》  评论

点击全文阅读


大步骤一、准备工作

步骤1:

安装 js-cookie 依赖

npm install js-cookie --save

步骤2:

在登录页面中引入 js-cookie 依赖

<script>import jsCookie from 'js-cookie';</script>

大步骤二、在 登录页面 的vue文件 中使用它!

步骤1:

<script>// xxx 是你data中的用户名jsCookie.set('username',this.xxx)</script>

在这里插入图片描述

大步骤三、在 其他页面 的vue文件 中使用它!

步骤1:

在其他页面中引入 js-cookie 依赖

<script>import jsCookie from 'js-cookie';</script>

步骤2:

设定一个 computed 计算属性,并在其中写入获取登录界面 cookies 的方法:

computed:{  showUserName(){    return jsCookie.get('username')  }},

在这里插入图片描述

步骤3:

在需要使用的地方使用 插值表达式 {{xxx}} 来使用它!
(请注意,我们需要用刚写好的函数来引用)

在这里插入图片描述

四、大工告成!

1.来看看效果吧!

1.1 登录页面,用户名为 LYL:

在这里插入图片描述
1.2 登录后,主页已经显示用户名了!

在这里插入图片描述


点击全文阅读


本文链接:http://zhangshiyu.com/post/58747.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1