3用户信息展示

用户信息展示"/>

3用户信息展示

上一篇完成了AdminLTE的整合，接下来就要把页面中的逻辑一一填充进来了，先从展示用户信息开始吧。

我们需要用户点击账户信息按钮后被导航到账户信息页。所以需要给账户信息按钮添加router-link，点击时调用router进行页面跳转。

第一步：在账户信息的HTML代码处添加事件

<router-link to="/userProfile/travelCount"><button href="#" class="btn btn-primary btn-flat ch">账户信息</button>
</router-link>

第二步：新建一个userProfile.vue和一个travelCount.vue。userProfile用来展示用户的基本信息，travelCount用来展示用户的出差记录。travelCount是被嵌套在userProfile中的。

userProfile.vue：

<template><!-- Main content --><section class="content"><div class="row"><div class="col-md-3"><!-- Profile Image --><div class="box box-primary"><div class="box-body box-profile"><img class="profile-user-img img-responsive img-circle" src="../assets/img/avatar5.png" alt="User profile picture"><h3 class="profile-username text-center ch">{{displayName}}</h3><p class="text-muted text-center ch">{{duty}}</p><ul class="list-group list-group-unbordered"><li class="list-group-item"><b class="ch">用户名：</b> <b class="pull-right ch">{{displayName}}</b></li><li class="list-group-item"><b class="ch">登录名：</b> <b class="pull-right ch">{{name}}</b></li><li class="list-group-item"><b class="ch">邮箱地址：</b> <b class="pull-right ch">{{email}}</b></li><li class="list-group-item"><b class="ch">所属部门：</b> <b class="pull-right ch">{{department}}</b></li><li class="list-group-item"><b class="ch">职务：</b> <b class="pull-right ch">{{duty}}</b