vue.js - 如何在 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>

Answer 1

你可以这样做:

import { useRoute } from 'vue-router';

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