Question

我有一个带有Vue路由器实现的vuejs应用程序，我的动态URL在第一次渲染后没有渲染获取的数据。我有一个搜索栏，用于搜索用户，在首页（https://reboundtribe.com）页面上，当用户单击时，搜索将返回用户，该页面转到用户个人资料，但用户个人资料页面上的任何搜索都不会呈现用户详细信息如果用户被点击

访问 http://reboundtribe.com （benjaminchukwudi0@gmail.com，123456）-登录并搜索“ Ben”，然后单击任何用户以转到用户个人资料页面，在用户个人资料页面上单击任何其他用户，结果将保持不变

我将ID和用户名用作params，但是同样的问题，刷新页面时，它会呈现用户数据

路由器代码

    {
         path: '/:username/profile',
         component: Profile,
         meta: {
             requiresAuth: true
         }
    },

个人资料页面

    beforeRouteEnter (to, from, next) {
        axios.get(`/auth/user/${to.params.username}/profile`)
            .then(response => {
                next(vm => (vm.user = response.data));
            })

    },

假定呈现用户详细信息。请为此指导我。

谢谢

Answer 1

问题在于路由不会更改（仅参数会更改），并且不会触发beforeRouteEnter挂钩。

关于Github的讨论也涉及这个问题：https://github.com/vuejs/vue-router/issues/1350#issuecomment-295367452

您可以尝试为参数添加观察者，以在用户名更改时获取数据（保留beforeRouterEnter钩子）

watch: {
  '$route.params.username': function (username) {
      axios.get(`/auth/user/${username}/profile`).then(response => {
         this.user = response.data;
      })
   }
},

Vue.js Vue路由器动态网址无法正常工作

1 个答案: