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

Question

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

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

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

以防在同一页上我有一些 link as

<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;
        },

如何在不使用 router-view 的情况下修复它？

感谢任何建议

Answer 1

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

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

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

How update a VUE component changing URL param in current page

router

vue.js