Vue组件UserView出现三类未处理错误，疑与router-link相关

错误信息 #

• Unhandled error during execution of setup function
• Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.
• Uncaught (in promise) Error: Missing required param "id"

组件代码 #

<template>
<div>
  <div class="text-center w-full text-xl text-green-700" v-if="isLoading">
    Loading...
  </div>

  <div class="text-center w-full text-xl text-red-700" v-if="error">Something was happened</div>

  <div v-if="users" class="w-full mt-5  overflow-x-auto">
      <table class="w-1/2 text-sm ml-auto mr-auto text-center text-gray-500">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50">
        <tr>
          <th scope="col" class="px-3 py-1.5">FirstName</th>
          <th scope="col" class="px-3 py-1.5">Email</th>
          <th scope="col" class="px-3 py-1.5">Phone Number</th>
          <th scope="col" class="px-3 py-1.5">Events Count</th>
          <th scope="col" class="px-3 py-1.5">Next Event Date</th>
        </tr>
        </thead>
        <tbody>
        <tr class="bg-white border-b" v-for="(user) in users">
          <td>
            <router-link class="hover:font-medium" :to="{name:'editUser',params:{id:user._id}}">
            {{user.firstName}}
            </router-link>
          </td>
          <td>{{user.email}}</td>
          <td>{{user.phoneNumber}}</td>
          <td>{{user.eventsCount}}</td>
          <td v-if="user.eventsCount>0">{{user.events[0].startDate.slice(0,10) }}</td>
          <td v-if="user.eventsCount==0"></td>
        </tr>
        </tbody>
      </table>
      <pagination-view :currentPage="currentpage" class="break-normal" :total="users.at(-1)" :limit="limit" :url="url"></pagination-view>
  </div>
</div>
</template>

<script>
import {actionTypes} from "@/store/modules/users";
import {mapState} from "vuex";
import PaginationView from "@/components/PaginationView.vue";
import {data} from "autoprefixer";

export default {
  name: "UserView",
  data(){
    return{
      total:12,
      limit:1,
      currentpage:1,
      url:'/'
    }
  },
  components: {PaginationView},
  props:{
    apiUrl:{
      type:String,
      required:true
    }
  },
  computed:{
    data() {
      return data
    },
    ...mapState({
      isLoading:state =>state.users.isLoading,
      users:state => state.users.data,
      error:state => state.users.error
    })
  },
  mounted(){
    this.$store.dispatch(actionTypes.getUsers,{apiUrl: this.apiUrl})
  }
}
</script>

<style scoped>
</style>

问题分析与解决 #

核心原因 #

异步加载用户数据阶段，users初始状态可能是undefined，或者返回的用户列表中存在缺失_id字段的对象。模板直接遍历users并在router-link中绑定user._id，当数据未就绪或字段缺失时，就会触发"Missing required param 'id'"错误，进而引发后续调度器刷新相关异常。

解决步骤 #

1. 初始化Vuex用户数据为数组
   在Vuex的users模块中，将state.data初始值设为[]，避免模板遍历undefined：

   // store/modules/users.js
   const state = {
     data: [],
     isLoading: false,
     error: null
   }
   

2. 给router-link添加存在性判断
   确保只有当user._id存在时才渲染跳转链接，无id时直接显示文本：

   <td>
     <router-link 
       v-if="user._id"
       class="hover:font-medium" 
       :to="{name:'editUser',params:{id:user._id}}"
     >
       {{user.firstName}}
     </router-link>
     <span v-else>{{user.firstName}}</span>
   </td>
   

3. 修复潜在空指针问题
   对user.events[0].startDate添加可选链操作，避免数组或字段为空时报错：

   <td v-if="user.eventsCount>0">{{user.events?.[0]?.startDate?.slice(0,10) }}</td>
   

4. 移除无用计算属性
   删除computed中导入自autoprefixer的data()属性，完全无业务作用：

   // 删掉以下代码块
   data() {
     return data
   },
   

5. 修正分页组件的total参数
   users.at(-1)是取最后一个用户对象，并非总数据条数，需调整为正确的总条数来源（比如从Vuex state获取）：

   <pagination-view 
     :currentPage="currentpage" 
     class="break-normal" 
     :total="total" <!-- 替换为实际总条数，比如state.users.total -->
     :limit="limit" 
     :url="url"
   ></pagination-view>
   

内容的提问来源于stack exchange，提问作者Maksym