javascript 如果URL发生变化,我如何强制路由器视图更新

pod7payv  于 2023-05-12  发布在  Java
关注(0)|答案(1)|浏览(152)

我有一个显示用户配置文件的路径,路径是website.com/user/38。如果我点击我自己的配置文件,那么路径会改变为website.com/user/39,但是视图不会改变,我仍然会看到用户38的配置文件。链接到我的个人资料只是一个router-link

<router-link
    :to="'/user/' + loggedUser"
    @click="hideSub"><li>
        <img src="../assets/img/user.png" />Profile
    </li></router-link
>

如果路径完全改变,就像主页一样,那么它就可以工作,但如果路径包含一个变量就不行了。
下面是路由器索引文件中的用户路径:

{
        path: "/user/:id",
        name: "user",
        component: () => import("@/views/ProfileView.vue"),
        meta: {
            requiresAuth: true,
        },
    },

下面是获取配置文件数据的代码:

try {
        let userdata = await axios.get("/api/v1/user/" + userID);
        user.value = userdata.data;
        if (user.value.profile != null) {
            userprofile.value = userdata.data.profile;
            home.value = userdata.data.home_address;
            username.value = userdata.data.username;
            document.title =
                userprofile.value.first_name +
                " " +
                userprofile.value.last_name +
                " | site";
            var birthdate = new Date(userprofile.value.birthdate);
            var month = birthdate.toLocaleString("default", { month: "long" });
            var day = birthdate.getDate();
            var bday = day + " " + month;
            birthday.value = bday;
        } else {
            userprofile.value = {};
        }
    } catch (error) {
        if (error) {
            if (error.response.status == 404) {
                router.push({ path: "/not-found", replace: true });
            }
        }
    }

如果路径发生更改,如何强制视图更新,而不必刷新整个页面?

yjghlzjz

yjghlzjz1#

这是Vue中路由器链接的常见问题。路由器视图组件不会在路由参数更改时重新呈现,即使URL发生更改也是如此。
有几个可能的解决方案来解决这个问题:
1.您可以在router-view上使用key属性,它通知Vue在同一路径导航上使用不同的组件示例。

<router-view :key="$route.fullPath" />

1.您可以将props作为true属性添加到路由定义中。因此,每当路径参数改变时, prop 也会改变并触发重新渲染。

{
  path: '/user/:userId',
  props: true,
  name: 'user',
  component: () => import('../views/UserProfile.vue')
}

1.也可以使用beforeRouteUpdate组件内防护。参考:https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards

相关问题