Vue Composition API路由参数更新失效及无用户未跳转问题求助

咱们先拆解你遇到的两个问题，一步步来解决：

问题1：路由参数更新时用户信息不刷新 #

你的setup函数只会在组件初始化时执行一次，虽然userToLoad是响应式的computed值，但user = listOfUsers.find(...)这行代码只在组件第一次挂载时运行了一次，后续路由参数变化时不会重新执行查找逻辑，所以页面显示的还是旧数据。

修复方案：把user也改成computed属性，这样每当userToLoad变化时，它会自动重新计算：

const user = computed(() => listOfUsers.find((u) => u.userId === +userToLoad.value));

问题2：路由参数变化时未触发404重定向 #

现在的重定向逻辑写在setup的初始化代码里，只有第一次进入组件时会检查用户是否存在。当你从/users/1跳转到/users/3（不存在的用户）时，setup不会重新执行，所以不会触发重定向。

修复方案：用watch监听userToLoad的变化，每次参数更新时都检查用户是否存在，不存在就跳转到404页面：

import { computed, defineComponent, getCurrentInstance, watch } from '@vue/composition-api';

// ... 其他代码 ...

watch(userToLoad, (newUserId) => {
  const exists = listOfUsers.some(u => u.userId === +newUserId);
  if (!exists) {
    root.$router.push('/404');
  }
}, { immediate: true }); // immediate: true 确保初始化时也会执行一次

完整修复后的代码 #

<template>
  <div>{{username}}</div>
</template>
<script lang="ts">
import { computed, defineComponent, getCurrentInstance, watch } from '@vue/composition-api';
export const useUsername = ({ user }) => {
  return { username: user.value?.name || '' }; // 这里要加.value，因为user现在是computed了
};
export default defineComponent({
  setup(props, { root }) {
    const userToLoad = computed(() => root.$route.params.userId);
    const listOfUsers = [
      { userId: 1, name: 'user1' },
      { userId: 2, name: 'user2' },
    ];
    // 把user改成computed，响应路由参数变化
    const user = computed(() => listOfUsers.find((u) => u.userId === +userToLoad.value));

    // 监听路由参数变化，处理重定向
    watch(userToLoad, (newUserId) => {
      const userExists = listOfUsers.some(u => u.userId === +newUserId);
      if (!userExists) {
        root.$router.push('/404');
      }
    }, { immediate: true }); // 初始化时立即执行一次检查

    const { username } = useUsername({ user });
    return { username };
  },
});
</script>

额外注意点 #

• 因为user现在是computed对象，所以在useUsername里要通过user.value访问实际的用户对象，还要加个空值判断，避免用户不存在时出现报错。
• watch的immediate: true配置很重要，这样组件第一次挂载时也会执行重定向检查，覆盖初始进入的场景。

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