账号导航布局

展示user 内容
使用element-ui layout 布局

账号信息路由跳转

v-router

import Vue from 'vue'
import Router from 'vue-router'
import index from '../components/index.vue'
import info from '../components/info/info.vue'
import mgr from '../components/mgr/mgr.vue'
import role from '../components/role/role.vue'
import dept from '../components/dept/dept.vue'
import menu from '../components/menu/menu.vue'
import dict from '../components/dict/dict.vue'
import channel from '../components/channel/channel.vue'
import articleedit from '../components/articleedit/articleedit.vue'
import article from '../components/article/article.vue'
import filemgr from '../components/filemgr/filemgr.vue'

Vue.use(Router)

const routes =[
	 {path:'/',name:'index',component:index},
	 {path:'/info',name:'info',component:info},
	 {path:'/mgr',name:'mgr',component:mgr},
	 {path:'/role',name:'role',component:role},
	 {path:'/dept',name:'dept',component:dept},
	 {path:'/menu',name:'menu',component:menu},
	 {path:'/dict',name:'dict',component:dict},
	 {path:'/channel',name:'channel',component:channel},
	 {path:'/cms/articleEdit',name:'articleedit',component:articleedit},
	 {path:'/article',name:'article',component:article},
	 {path:'/filemgr',name:'filemgr',component:filemgr}
]

export default new Router({
	routes
})

component 下 创建 index.vue

mkdir info
vim info.vue

账号信息展示

info.vue

<template>
	<div class="info">
		<p>账户信息：{{$store.state.user.info.profile.account}}</p>
		<p>
			修改密码:  
			<span @click="type = true" style="color: deepskyblue;">
				修改密码
			</span>
		</p>
		<p>名字：{{$store.state.user.info.profile.name}}</p>
		<p>生日：{{$store.state.user.info.profile.birthday}}</p>
		<p>性别:{{$store.state.user.info.profile.sex==1?'男':'女'}}</p>
		<p>邮箱：{{$store.state.user.info.profile.email}}</p>
		<p>电话：{{$store.state.user.info.profile.phone}}</p>
		<p>部门:{{$store.state.user.info.profile.dept}}</p>
		<p>
			<el-button type="danger" @click="clearuser">退出登录</el-button>
		</p>
		<setpass :type="type" :btn="btn"></setpass>
	</div>
</template>

<script>
	import setpass from './setpass.vue'
	export default {
		data(){
		   return {
		   		type:false
		   }
		},
		components:{
			setpass
		},
		methods:{
			clearuser(){
				//退出登录
				localStorage.clear()
				location.href = './login.html'
			},
			btn(){
				//关闭对话框的状态
				this.type = false
			}
		}
	}
</script>

<style>
	.info>p{
		line-height: 40px;
	}
</style>

修改密码

vim setpass.vue

dialog 对话框

<template>
	<div>
		<el-dialog title="修改密码" :visible.sync="dialogFormVisible" @close="cleartext">
			<el-form ref="form" :model="pass" label-width="120px">
				<el-form-item label="旧密码">
					<el-input v-model="pass.oldPassword"></el-input>
				</el-form-item>
				<el-form-item label="新密码">
					<el-input v-model="pass.password"></el-input>
				</el-form-item>
				<el-form-item label="重复新密码">
					<el-input v-model="pass.rePassword"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="setpass">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { http, updatePwd } from '../../api/api.js'
	export default {
		props: ['type', 'btn'],
		data() {
			return {
				dialogFormVisible: this.type, //对话框状态
				pass: {
					oldPassword: '',
					password: '',
					rePassword: ''
				}
			}
		},
		created(){
			//开启动画
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)'
			});
			this.$nextTick(()=>{
				//结束动画
                setTimeout(() => {
                    loading.close();
                }, 1000);
			})
			
		},
		methods: {
			cleartext() {
				//清空数据
				for(var i in this.pass) {
					this.pass[i] = ''
				}
				//调取的父级函数
				this.btn()
			},
			setpass() {
				//修改密码
				if(this.pass.oldPassword == '') {
					this.$message.error('请输入旧密码');
				} else if(this.pass.password == '') {
					this.$message.error('请输入新密码');
				} else if(this.pass.rePassword == '') {
					this.$message.error('请再次输入新密码');
				} else if(this.pass.password != this.pass.rePassword) {
					this.$message.error('两次新密码不一致');
				} else {
					this.$http.post(http + updatePwd, this.pass, {
						emulateJSON: true
					}).then((data) => {
						if(data.data.msg == '成功') {
							this.$message({
								message: '恭喜你，修改成功了',
								type: 'success'
							});
							this.dialogFormVisible = false
						} else {
							this.$message.error(data.data.msg);
						}
						console.log(data)
					}, (err) => {
						this.$message.error(err.data.message);
					})
				}
			}
		},
		watch: {
			type(a, b) {
				//当父级传入的值发生改变，修改对话框的状态
				this.dialogFormVisible = this.type
			}
		}
	}
</script>

click 修改 type 的状态 来触发修改密码的谈话框

然后用后端接口

校验方法 setmethods

setpass() {
				//修改密码
				if(this.pass.oldPassword == '') {
					this.$message.error('请输入旧密码');
				} else if(this.pass.password == '') {
					this.$message.error('请输入新密码');
				} else if(this.pass.rePassword == '') {
					this.$message.error('请再次输入新密码');
				} else if(this.pass.password != this.pass.rePassword) {
					this.$message.error('两次新密码不一致');
				} else {
					this.$http.post(http + updatePwd, this.pass, {
						emulateJSON: true
					}).then((data) => {
						if(data.data.msg == '成功') {
							this.$message({
								message: '恭喜你，修改成功了',
								type: 'success'
							});
							this.dialogFormVisible = false
						} else {
							this.$message.error(data.data.msg);
						}
						console.log(data)
					}, (err) => {
						this.$message.error(err.data.message);
					})
				}
			}
		},

清除修改信息和登出

setpass,vue

cleartext() {
				//清空数据
				for(var i in this.pass) {
					this.pass[i] = ''
				}
				//调取的父级函数
				this.btn()
			},

info.vue

methods:{
			clearuser(){
				//退出登录
				localStorage.clear()
				location.href = './login.html'
			},
			btn(){
				//关闭对话框的状态
				this.type = false
			}
		}