Vue Router传递userId时页面数据展示与$route获取报错排查

核心错误点及修复步骤 #

1. 组件语法不完整（导致$route无法访问） #

你提供的代码存在多处语法闭合缺失，这会直接导致组件初始化失败，Vue Router的$route对象无法正常注入，从而出现cannot read properties of null (reading '$route')错误：

• UsersList组件：fetchUsers方法缺少闭合的}
• UserPage组件：created钩子缺少闭合的}，methods对象也缺少闭合的}

补全后的代码片段示例：

// UsersList的fetchUsers方法
fetchUsers() {
  axios.get('https://jsonplaceholder.typicode.com/users/')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.error('Error loading users', error);
      });
}

// UserPage的created钩子
created() {
  this.getUser(this.$route.params.userId)
}

// UserPage的methods对象
methods:{
  getUser(userId) {
    // ...接口逻辑
  }
}

2. 用户详情API地址错误（导致user.name报错） #

你调用的用户详情接口https://jsonplaceholder.typicode.com/users?userId=${userId}返回的是包含单个用户的数组（格式如[{id:8, name:'...'}]），而非单个用户对象。但你在模板中直接使用{{user.name}}，初始user是空对象，赋值数组后user.name会直接失效，甚至触发未定义报错。

正确的接口应该通过路径参数获取单个用户：

axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`)

该接口返回单个用户对象，赋值给this.user后，{{user.name}}即可正常渲染。

3. 未处理数据加载状态（优化体验） #

初始user为空对象，API请求完成前user.name会是undefined，建议在模板中添加条件渲染避免空白或异常：

<template>
  <div v-if="user.id">
    <h1>{{user.name}}</h1>
    <!-- 其他用户信息 -->
  </div>
  <div v-else>加载用户信息中...</div>
</template>

完整修复后代码示例 #

UsersList组件 #

<template>
  <div>
    <div v-for="user in users" :key="user.id">
      <button @click="showUserPage(user.id)">Go to {{user.name}}'s page</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      users: [] 
    }
  },
  mounted() {
    this.fetchUsers()
  },
  methods: {
    showUserPage(userId) {
      this.$router.push({ name: 'user-page', params: { userId } })
    },
    fetchUsers() {
      axios.get('https://jsonplaceholder.typicode.com/users/')
          .then(res => this.users = res.data)
          .catch(err => console.error('Error loading users', err));
    }
  }
}
</script>

UserPage组件 #

<template>
  <div>
    <div v-if="user.id">
      <h1>{{user.name}}</h1>
      <p>邮箱: {{user.email}}</p>
      <p>电话: {{user.phone}}</p>
    </div>
    <div v-else>加载用户信息中...</div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data(){
    return{
      user: {}, 
    }
  },
  created() {
    this.getUser(this.$route.params.userId)
  },
  methods:{
    getUser(userId) {
      axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`)
          .then(res => this.user = res.data)
          .catch(err => console.error('Error loading user', err));
    }
  }
}
</script>

router.js（确认组件导入正确） #

import Vue from 'vue'
import VueRouter from 'vue-router'
import UserList from './components/UsersList.vue'
import UserPage from './components/UserPage.vue'

Vue.use(VueRouter)

const routes = [
    { path: '/', component: UserList },
    { path: '/user/:userId', name:'user-page', component: UserPage }
]

const router = new VueRouter({ routes })

export default router

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