refi64 / vuedart

Create Vue web apps in Dart
https://refi64.com/vuedart
310 stars 19 forks source link

Router before/after hooks #29

Open shane-lab opened 5 years ago

shane-lab commented 5 years ago

Hey, thanks for this library!

I've just started with both Dart and Vue and thus I've now been using your VueDart for a few days. I'd like to add some progress indicator when switching routes. Unfortunately, an instance of VueRouter does not expose a method to set either beforeHooks or afterHooks. I've managed to hack in the following:

  final router = VueRouter(mode: VueRouterMode.history, routes: [
    ...
  ]);

  // hacking in the router object
  var hookable = (router.appOptions.entries.first.value as dynamic);
  if (hookable != null) {
    setProperty(hookable, 'beforeHooks', [
      (dynamic to, dynamic from, Function next) {
        if (to.name != null) {
          NProgress.start();
        }

        next();
      }
    ]);

    setProperty(hookable, 'afterHooks', [
      (dynamic to, dynamic from) => NProgress.done()
    ]);
  }

This doesn't directly work when compiling with dart2js, as these functions do not translate well to javascript..

I am wondering if there is any support planned to add router before/after hooks?

refi64 commented 5 years ago

Ah I forgot all about that...

As a workaround until then, you can create a class class MyVueRoute<T extends VueComponentBase> extends VueRoute<T>, then override jsargs to add the arguments to the returned JS object.