如何在 vue 组合 API 中使用路由器？

Question

我在vue中定义了一条路线：

 /users/:userId

哪个指向 UserComponent：

 <template>
 <div>{{username}}</div>
</template>

我使用 computed 来自 @vue/composition-api 来获取数据。

问题是当路由更改为另一个 userId 时，通过导航到另一个用户，html模板中的用户没有像我预期的那样改变。当用户不在列表中时，它也不会重定向。

那么我能做些什么来解决这个问题呢？

这是我的代码：

 <template>
  <div>{{username}}</div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, getCurrentInstance } from '@vue/composition-api';

export const useUsername = ({ user }) => {
  return { username: user.name };
};

export default defineComponent({
  setup(props, { root }) {
    const vm = getCurrentInstance();

    const userToLoad = computed(() => root.$route.params.userId);
    const listOfUsers = [
      { userId: 1, name: 'user1' },
      { userId: 2, name: 'user2' },
    ];

    const user = listOfUsers.find((u) => u.userId === +userToLoad.value);
    if (!user) {
      return root.$router.push('/404');
    }

    const { username } = useUsername({ user });

    return { username };
  },
});

</script>

原文由 Jon Sud 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以这样做：

 import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    // Now you can access params like:
    console.log(route.params.id);
  }
};

原文由 NJ Berman 发布，翻译遵循 CC BY-SA 4.0 许可协议