vue登录后获取用户信息（【自用】VUE 获取登录用户名 显示在其他页面上）

大步骤一
  
  
  
  
  
  
  
  
、准备工作

步骤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 登录后
 
 
 
 
 
 
 
 
，主页已经显示用户名了！