计算属性在 Vue Devtools 中定义，但在mounted() 钩子中不能被“this”访问

Question

我使用计算属性返回当前用户视图的路由参数。 返回值在 devtools 中定义，如下所示，但是当我尝试通过 console.log 在我的mounted() function 中访问它时，它返回为未定义。 我在想将 console.log 包装在$nextTick中可以解决这个问题，但事实并非如此。 我没主意了。

开发工具截图：

我的代码：

  updated() {
    this.fetchGroupMessages();
  },
  mounted() {
    let listenerID = "UNIQUE_LISTENER_ID";
    this.$nextTick(() => {
      this.getUser();
      console.log(this.reservationId);
    });
  },
computed: {
    reservationId() {
      return this.$route.params.reservationId;
    }
  },

对于更多上下文，我正在构建一个聊天应用程序，该应用程序在App.vue的beforeCreated()钩子中初始化，然后在created() () 钩子中对用户进行身份验证。 最后，如果isLoggedIn == true ， Chat.vue组件会渲染。

编辑：路线/网址

export default {
    routes: [{
        path: "/admin",
        name: 'adminDashboard',
        component: AdminDashboard
    },
    {
        path: "/",
        name: "dashboard",
        component: Dashboard
    },
    {
        name: "bookings",
        path: "/bookings",
        component: Bookings
    },
    {
        path: "/reservation/:reservationId",
        children: [
            { path: "", component: Gallery },
            { path: "media/:mediaId", component: Media }
        ],
        component: Reservation
    },
    {
        name: "shopping-cart",
        path: "/bag",
        component: ShoppingCart
    },
    {
        name: "Thanks",
        path: "/thanks",
        component: Thanks
    }],
    add: function (component) {
        this.routes.push({
            path: component.path,
            children: component.children,
            name: component.name,
            component: component
        });
    }

Answer 1

确保将router传递到Vue配置中。 这就是使$route反应的原因。