這個問題呢，在APP的話很容易實現，比如微信：

---

---

首先是點擊昵稱，然后就進入到修改昵稱的頁面。在修改昵稱的頁面，我們可以看到，有一個取消和保存的按鈕，我們可以直接通過兩個按鈕來實現相關功能。

但是在H5里面是沒有辦法，設置頂部保存和取消按鈕的，那我們怎么辦呢？辦法很簡單，就是我們自己在頁面寫上保存和取消的按鈕。

---

---

---

那么這個具體要怎么實現呢？
接下來，我講一下，具體流程：

環境： nodejs +npm + vue2 +vue-router + vuex

**操作：**了解vue-router基本操作，以及sessionStorage的存儲和獲取

---

錯誤的做法：

1-在上一個頁面的路由傳遞（昵稱）
2-在當前頁面從URL中獲取（昵稱參數）并且寫進input中
3-保存的時候，講昵稱值存入 sessionStorage
4-在上一個頁面從sessionStorage中獲取昵稱值

---

正確的做法：

1-在上一個頁面的路由傳遞（昵稱）
2-先從 sessionStorage中獲取昵稱值，如果沒有則在當前頁面從URL中獲取（昵稱參數）并且寫進input中
3-保存的時候，講昵稱值存入 sessionStorage
4-在上一個頁面從sessionStorage中獲取昵稱值

---

具體代碼：

點擊昵稱的HTML代碼：

<div class="bottom" style="margin-top: 30px;"><router-link v-if="param && param.data && param.data.nickName" :to="{name:'modifyName',params:{nickName:param.data.nickName}}"><div class="mycar jump coupon-receive"><div class="font">昵稱</div><div class="gray"><span class="nick-name">{{nickname?nickname:param.data.nickName}}</span><label></label></div></div></router-link></div>

注解：
1- router-link 最后會轉換成a標簽
2- :to 后面參數分別是路由地址，以及路由傳遞的參數
3- {{ }} 都是vue的data里面的數據

修改昵稱頁面內HTML

<template><div class="modifyName"><input id="nickname" class="inputname" maxlength="11" name="nickName" :value="nickName" /><div style="padding: 0 5%;" @click="saveName()"><span id="save" class="btn">保存</span></div><div style="padding: 0 5%;" @click="cancleName()"><router-link :to="{name:''}" id="cancle" class="btn">取消</router-link></div></div> </template>

注解：

1- saveName() 保存昵稱方法
2- cancleName() 取消修改昵稱方法

修改昵稱頁面JS代碼：

<script>import { mapActions } from 'vuex'export default {name: 'modifyName',data () {return {nickName: ''}},created () {var self = thisif(window.sessionStorage.getItem('nickname')){self.nickName = window.sessionStorage.getItem('nickname');}else{self.nickName = this.$route.params.nickName}self.login({}).then(function (res) { //判斷是否登錄if (parseInt(res.code) === 0) {}else{self.$router.push({name: 'login'})}})},methods: {saveName () { // 選擇性別var me = thisvar nick = document.getElementById('nickname').valuewindow.sessionStorage.setItem('nickname', nick)me.$router.push({name: 'setupMessage'})},cancleName () {document.getElementById('nickname').value = this.$route.params.nickName;},...mapActions(['login'])} } </script>

注解：

1- import { mapActions } from ‘vuex’ 引入vuex

總結

以上是生活随笔為你收集整理的JS修改昵称的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。