[Vuejs]-How to import class property in another file – Vue/Typescript

0👍

Do not use beforeEnter if you need access to the instance.

The property exists on the component instance, not on the class definition.

beforeEnter does not have access to the instance.

Put your logic in the created() or mounted() method of the component, and prefix it with this..

Use beforeRouteEnter and beforeRouteUpdate for access to component’s this.

The beforeRouteEnter guard does NOT have access to this, because the guard is called before the navigation is confirmed, thus the new entering component has not even been created yet.

However, you can access the instance by passing a callback to next. The callback will be called when the navigation is confirmed, and the component instance will be passed to the callback as the argument:

beforeRouteEnter (to, from, next) {
  next(vm => {
    // access to component instance via `vm`
  })
}

So for your example

beforeRouteEnter (to, from, next) {
  next(vm => {
    vm.guest
  })
}

And for route changes that preserve the component:

beforeRouteUpdate (to, from, next) {
  this.guest
}

Official Documentation

beforeRouteEnter (to, from, next) {
    // called before the route that renders this component is confirmed.
    // does NOT have access to `this` component instance,
    // because it has not been created yet when this guard is called!
  },
beforeRouteUpdate (to, from, next) {
    // called when the route that renders this component has changed,
    // but this component is reused in the new route.
    // For example, for a route with dynamic params `/foo/:id`, when we
    // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
    // will be reused, and this hook will be called when that happens.
    // has access to `this` component instance.
  },

Leave a comment