Vuejs Vue Router dynamic url not working properly

Question

I have a vuejs application with Vue router implementation, my dynamic URL is not rendering the fetched data after the first render. I have a search bar to search users, on the home (https://reboundtribe.com) page the search returns users when the user is clicked it goes to user profile, but any search on the user profile page won't render the user details if a user is clicked

visit http://reboundtribe.com ([email protected], 123456) -- logins and search for "Ben", then click any user to go to a user profile page, on user profile page click any other user, and the result won't change

I Have used ids and usernames as params, but same issue, when the page is refreshed, it renders the user data

Router Code

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

The profile Page

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

    },

suppose to render the user details. Kindly guide me for this.

Thanks

Fab Fab · Accepted Answer · 2019-11-08T07:58:44

The problem is that the route doesn't change (only params change) and the beforeRouteEnter hook is not triggered.

There's also this discussion on Github talking about this issue: https://github.com/vuejs/vue-router/issues/1350#issuecomment-295367452

You can try to add a watcher for the param to fetch data if username changes (keeping the beforeRouterEnter hook)

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

Vuejs Vue Router dynamic url not working properly

1 Answers