如何更新当前页面中的 VUE 组件更改 URL 参数

Question

在我的 vue SPA 中，我有一个像这样的简单路由器：

 {path: '/page/:userId', name: 'user', component: user},

这意味着像 http://xxx.xxx/user/1 这样的 url 显示了具有用户 1 内容的组件用户。

如果在同一页面上我有一些链接

<vue-link :to="{name:'user', params={userId:3}}"> 

路由器只更新 URL 但内容页面（因为它假定页面与我所在的位置相同）

我的用户内容使用数据和手表中的 url 参数加载数据

数据

userId: this.$route.params.userId || 1、

观看

  watch: {

        userId: function () {
            return this.$route.params.userId || 1;
        },

如何在不使用路由器视图的情况下修复它？

感谢您的建议

Answer 1

如果我正确地解决了您的问题，即您无法跟踪您的路线更改。你需要观察route 的变化，每当你的路由在同一个组件上发生变化时，它应该做一些事情。

watch: {
    $route() {
        this.updatePage(this.$route.params.userId)
    }
},
methods: {
   updatePage(param) {
     // call api / do something
   }
}