vue-router小技巧：通过route传参动态设置页面

场景介绍

问：当需要对多个不同值进行修改时，使用的是同一个或几乎相同的编辑页面时，如何节省开发时间？ 答：使用 route 获取动态参数，并对页面进行设置。

部分代码展示

---

传参方：

<van-cell :value="user.gender" arrow-direction="down" is-link title="性别" to="/user/edit"  
          @click="edit('gender', '性别', user.gender)"/>

接收方：

<script setup>
import {ref} from 'vue'  
import { useRoute } from 'vue-router'  

// 获取路由参数  
const route = useRoute()  
const editUser = ref({  
  editKey: route.query.editKey,  
  editName: route.query.editName,  
  currentValue: route.query.currentValue  
})  
</script>

...
<van-field  
    v-model="editUser.currentValue"  
    :rules="[{ required: true, message: `请填写${editUser.editName}` }]"  
    :label="editUser.editName"  
    :name="editUser.editKey"  
    :placeholder="editUser.editName"  
/>

完整代码展示

---

传参：

<script lang="ts" setup>  
import {UserType} from "@/model/user";  
import router from "@/router";  

const user: UserType = {  
  id: 1,  
  username: 'zxb',  
  userAccount: 'zxb',  
  avatarUrl: 'https://picgo.cn-sy1.rains3.com/2025/03/c10098fa9fb610377f7fb02e2815ea58.png',  
  gender: 1,  
  phone: '12345678901',  
  email: '12345678901@qq.com',  
  status: 1,  
  createTime: new Date(),  
  updateTime: new Date(),  
  userRole: 0,  
  planetCode: '2021090101010101'  
};  

// 编辑  
const edit = (editKey: string, editName: string, currentValue: string) => {  
  router.push({  
    path: '/user/edit',  
    query: {  
      editKey,  
      editName,  
      currentValue  
    }  
  })  
}  
</script>  

<template>  
  <van-cell is-link title="用户名" to="/user/edit"/>  
  <van-cell :value="user.userAccount" is-link title="账号" to="/user/edit"/>  
  <van-cell arrow-direction="down" is-link title="头像" to="/user/edit">  
    <van-image :src="user.avatarUrl" alt=""/>  
  </van-cell>  
  <van-cell :value="user.gender" arrow-direction="down" is-link title="性别" to="/user/edit"  
            @click="edit('gender', '性别', user.gender)"/>  
  <van-cell :value="user.phone" arrow-direction="down" is-link title="手机号" to="/user/edit"  
            @click="edit('phone', '手机号', user.phone)"/>  
  <van-cell :value="user.email" arrow-direction="down" is-link title="邮箱" to="/user/edit"/>  
  <van-cell :value="user.planetCode" arrow-direction="down" is-link title="星球编号" to="/user/edit"/>  
  <van-cell :value="user.createTime.toISOString()" arrow-direction="down" is-link title="注册时间" to="/user/edit"/>  
</template>  

<style scoped>  

</style>

接收：

<script lang="ts" setup>  
import {ref} from 'vue'  
import { useRoute } from 'vue-router'  

// 获取路由参数  
const route = useRoute()  
const editUser = ref({  
  editKey: route.query.editKey,  
  editName: route.query.editName,  
  currentValue: route.query.currentValue  
})  

const onSubmit = (values) => {  
  console.log('submit', values);  
};  
</script>  

<template>  
  <van-form @submit="onSubmit">  
    <van-cell-group inset>  
      <van-field  
          v-model="editUser.currentValue"  
          :rules="[{ required: true, message: `请填写${editUser.editName}` }]"  
          :label="editUser.editName"  
          :name="editUser.editKey"  
          :placeholder="editUser.editName"  
      />  
    </van-cell-group>  
    <div style="margin: 16px;">  
      <van-button block native-type="submit" round type="primary">  
        确认修改  
      </van-button>  
    </div>  
  </van-form>  
</template>  

<style scoped>  

</style>