时间戳

首页 > 解决方案 > Vuejs Vue Router 动态 url 无法正常工作

vue.js - Vuejs Vue Router 动态 url 无法正常工作

问题描述

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

访问 http://reboundtribe.com (benjaminchukwudi0@gmail.com, 123456) -- 登录并搜索“Ben”，然后单击任何用户进入用户个人资料页面，在用户个人资料页面上单击任何其他用户，然后结果不会改变

我已将 ids 和用户名用作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));
            })

    },

假设呈现用户详细信息。请指导我。

谢谢

标签： vue.jsvuexvue-router

解决方案

问题是路线没有改变（只有参数改变）并且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;
      })
   }
},

推荐阅读