我有一个显示用户配置文件的路径,路径是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 });
}
}
}
如果路径发生更改,如何强制视图更新,而不必刷新整个页面?
1条答案
按热度按时间yjghlzjz1#
这是Vue中路由器链接的常见问题。路由器视图组件不会在路由参数更改时重新呈现,即使URL发生更改也是如此。
有几个可能的解决方案来解决这个问题:
1.您可以在router-view上使用key属性,它通知Vue在同一路径导航上使用不同的组件示例。
1.您可以将props作为true属性添加到路由定义中。因此,每当路径参数改变时, prop 也会改变并触发重新渲染。
1.也可以使用
beforeRouteUpdate
组件内防护。参考:https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards