浪花 - 用户信息编辑页

1. 创建用户信息编辑页

• 创建 UserEditPage.vue
• 配置路由

{
  path: '/user/edit',
  name: 'edit',
  component: UserEditPage
},

2. 点击单元格跳转页面

• 使用 Cell 单元格组件提供的 click 点击事件
• 更新：之前是在  中通过 to 属性来制定跳转的路由，现在需要获取当前所需修改表单项的信息，通过 @click 方法来记录用户点击行为

• 传递三个参数：要修改的字段名，修改标签（提示修改项），当前的单元格的值

• 作用：在点击该单元格时，告诉 UserEditPage 页面我们要修改哪一项

• 点击触发路由跳转并记录路径参数：使用 vue-router 提供的 useRouter 进行路由跳转

  • 使用 push() 方法进行页面跳转

    • 通过 path 记录要跳转的路由

    • 通过 query 记录路径参数：editKey、currentValue

3. 路由路径参数传递

• 目的：用户信息编辑页需要取到要修改项的数据
• 使用 vue-router 提供的 useRoute() 钩子函数，可以获取到当前的路由信息和参数

useRouter() 和 useRoute() 的区别：

• useRouter() ：返回路由器实例 router。相当于在模板中使用 $router
  • 可以通过该实例访问路由对象和方法，如 router.push("/user/edit")
  • 进行编程式导航、获取当前路由信息等操作
• useRoute() ：返回当前的路由地址。相当于在模板中使用 $route
  • 返回当前路由信息的响应式对象，包含了当前路由的路径、参数、查询字符串和元数据等信息

• 通过控制台打印输出判断传递过来的值是否正确

import { useRoute } from 'vue-router';

const route = useRoute();

console.log(route.query);

4. 引入 Form 表单组件

• 参考官方文档：Form 表单 - Vant 3 (gitee.io)
• 在表单中，每个 Field 组件 代表一个表单项，使用 Field 的 rules 属性定义校验规则
• 提交表单：提交用户修改的数据

  
    
    
  
  

    
      提交
    
  

import { ref } from 'vue';

export default {
  setup() {
    const username = ref('');
    const password = ref('');
    const onSubmit = (values) => {
      console.log('submit', values);
    };

    return {
      username,
      password,
      onSubmit,
    };
  },
};

• 查看页面效果

5. 表单数据绑定路由参数进行展示

• 初始化要编辑的用户对象 editUser = ref( { } )
  • ref 定义可动态交互的数据

• 从 route 中取出路由参数封装到 editUser 中

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

• 表单项动态展示 route 中的参数

6. 向后台提交用户要修改的数据

• TODO：向后台发送要修改的用户数据
• onSubmit()：暂时先在控制台打印输出要提交的数据

注意：有些数据不允许用户自定义修改，比如用户账户、星球编号、注册时间等字段

• 不设置跳转链接即可实现

7. 修复返回跳转的 Bug

• 点击返回图标之后直接返回到主页了，期望的应该是返回到上一个页面
• 使用路由器实例 router 的back() 方法

// 点击返回按钮触发事件
const onClickLeft = () => {
  router.back();
};