Vue项目实战系列（一）：如何修改个人信息

Vue项目实战系列（一）：如何修改个人信息

当你登录网站的时候，那么你肯定会有自己的个人信息，比如昵称，账户名，头像，性别以及电话等等。

那么当我们想修改这些数据的时候，背后究竟做了那些东西，使用了那些技术点。

如下是示意图，从后台获取个人信息下来，点击各项信息，可以对其进行编辑，然后进行修改。

那么我们是如何向下一个页面传递数据的呢？我们需要传递那些信息，应该如何实现呢？

本章学习重点：

1. 页面之间传递数据。
2. 创建多个页面。
3. 数据修改成功后，跳转回去

实现思路

1. 首先，创建一个路由页面。当点击每项的时候，则传递过去。【跳转制定页面，并携带数据：携带参数名，选项名，本来的参数，因为页面只有一个，肯定是根据你传递不同的数据，先展示不同的内容，并且发送给后台不同的内容。】
2. 那么id呢？id这是通过获取当前用户来获取到的，所以我们可以通过发送一个请求来拿到，或者传递过来也行（减少一个请求量）。
3. 修改数据后，直接跳转到个人信息页

具体代码实现

1. 创建布局一

使用的路由的query参数：向指定路径传递参数。

   router.push({
        path:'/user/edit',
        query:{
            editKey,editName,currentValue
        }
    })

2. 创建布局二

接受使用query传递的参数

const editUser = ref({
    editKey: route.query.editKey,
    currentValue: route.query.currentValue,
    editName: route.query.editName,
})

[editUser.value.editKey]: editUser.value.currentValue // 动态取值，参数名不固定
，中括号内的editUser.value.editKey是一个属性名，它需要从一个对象中动态地获取属性的值。

const foo = {bar: 'hello world'}
const prop = 'bar'

console.log(foo[prop]) // 输出 "hello world"

以上代码中，prop变量存储了属性名bar，然后使用foo[prop]来访问foo对象的bar属性，这里中括号内的prop变量会被动态解析并作为属性名来访问。