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>