27--修改姓名，change页面（跳页传值）

router.js传值

	{
		path: '/student/changename/:name',
		component: ChangeName,
		props: true,
		meta: {
			title: '更改姓名'
		}
	},

我的页面：

<template>
	<div class="page">
		<div>
			<cell-item label='学号' :value="number" :arrow='true' :url="myurl"></cell-item>
			<cell-item label='姓名' :value="name" :arrow='true' :url='myurl1'></cell-item>
			<cell-item label='性别' :value="sex" :arrow='true'></cell-item>
			<cell-item label='手机号码' :value="tel" :arrow='true' :url='myurl2'></cell-item>
			<cell-item label='学校' :value="school"></cell-item>
			<cell-item label='状态' :value="mystate"></cell-item>
			<cell-item label='密码'  :arrow='true' :url='myurl3'></cell-item>
		</div>
		<div class="row">
			<cube-button type="submit" @click='tui'>
				退出登录
			</cube-button>
		</div>
	</div>
</template>
<script>
	import CellItem from '../cell/CellItem.vue'
	export default {
		components: {
			CellItem
		},
		data: function() {
			return {
				number: '',
				name: '',
				sex: '',
				tel: '',
				school: '',
				state: 0,
				password: '',
			}
		},
		computed: { //计算属性
			mystate: function() {
				return this.state == 0 ? '正常' : '禁用'
			},
			myurl: function() {
				return '/student/changenumber/' + this.number
			},
			myurl1: function() {
				return '/student/changename/' + this.name
			},
			myurl2: function() {
				return '/student/changetel/' + this.tel
			},
			myurl3: function() {
				return '/student/changepwd/' + this.pwd
			},
			// number:function(){
			// 	return this.$store.state.number
			// },
			// name:function(){
			// 	return this.$store.state.name
			// },
			// sex:function(){
			// 	return this.$store.state.sex
			// },
			// tel:function(){
			// 	return this.$store.state.tel
			// }
			// password:function(){
			// 	return this.$store.state.password
			// },
		},
		mounted: function() {
			console.log(111)
			let token = sessionStorage.getItem('token')
			let role = sessionStorage.getItem('role')
			// console.log(123)
			this.$request({
				method: 'post',
				url: '/student.my/index',
				data:{
					token:token
				}
			}).then(data => {
				// if(data.error)
				this.number = data.number ? data.number : ''
				this.name = data.name ? data.name : ''
				this.sex = data.sex
				this.tel = data.tel
				this.school = data.schoolname
				this.state = data.state
			}).catch(error=>{
				console.log(error)
			})
			console.log(123)
		},
		// mounted:function(){
		// 	this.getData()
		// },
		activated:function(){
		console.log(this.$route.meta.isBack)	
		},
		methods: {
			activated: function() {
				if (sessionStorage.setItem('number')) {
					this.number = sessionStorage.setItem('number')
				}
			},
			// getData:function(){
			// 	let token = sessionStorage.getItem('token')
			// },
			tui: function() {
				this.$router.replace('/').catch(res=>{})
			}
			// 		this.$request({
			// 			method: 'post',
			// 			url: '/student.my/index',
			// 			data: {
			// 				token: token
			// 			}
			// 		}).then(data => {
			// 			// if(data.error)
			// 			let number = data.number ? data.number : ''
			// 			this.$store.commit('number',number)
			// 			this.$store.commit('name',data.name)
			// 			this.$store.commit('sex',data.sex)
			// 			this.$store.commit('tel',data.tel)
			// 			this.$store.commit('school',data.school)
			// 			this.$store.commit('state',data.state)
			// 		}).catch(error=>{
			// 			console.log(error)
			// 		})
			// }
		}
	}
</script>
<style scoped>
	.page .row {
		margin: 10px 0;
	}
</style>

修改姓名页面：

<template>
	<div class="page">
		<div class="top">
			<!--  路由组件传参 -->
			<i class="cubeic-back" @click="back"></i>
			<div>更改姓名</div>
			<cube-button type="submit" :inline="true" :disabled="save_disabled" @click="save">保存</cube-button>
		</div>
		<cube-input v-model="new_name" type='string' placeholder="请输入姓名"></cube-input>
		<cube-validator ref="validator0" v-model="valid" :model="new_name" :rules="rules" :messages="messages"></cube-validator>
	</div>
</template>

<script>
	export default {
		// 参数传过来，props必须为true （router.js）路由组件传参
		props: ['name'],
		data: function() {
			return {
				valid: undefined,
				new_name: this.name,
				rules: {
					required: true,
					type: 'String'
				},
				messages: {
					type: '必须为字符串'
				}
			}
		},
		// 计算属性
		computed: {
			save_disabled: function() {
				return this.new_name == this.name
			}
		},
		methods: {
			save: function() {
				const p1 = this.$refs.validator0.validate()
				p1.then(res => {
					if (this.valid) {
						console.log(1111)
						let data={
							token:sessionStorage.getItem('token'),
							name:this.new_name
						}
						this.$request({
							method:'post',
							url:'/student.my/updatename',
							data:data	
						}).then(res=>{
							
						})
							this.$router.go(-1)
					} else {

					}
				})
			},
			back: function() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	.page {
		padding-top: 10px;
	}

	.top {
		display: flex;
		justify-content: space-between;
		margin: 10px 15px;
		align-items: center;
	}
</style>