Adding hooks with multiple routes

Hello. Fantastic work with Navigo! I am able to get hooks working when adding a route. This may be a very simple matter of understanding Javascript, but I am unable to get the hooks working with multiple routes as in the Demo Basic code.

Is this possible? If so, where would I place the hooks objects when working with multiple routes? Thank you.

Hooks when adding a single route:

router.on(
	"home",
	function () {
		console.log("home");
	},
	{
		before: function (done, params) {
			console.log("before");
			done();
		}
	}
);

Hooks when adding multiple routes at once?

router.on({
	'home': function () {
		console.log("home")
	},
	'page1': function () {
		console.log("page1");		
	}
});

[krachim]

Hi.

Thanks for your hard work. I rly like this router. Seeing this by searching for another Problem and i think i got an solution? See the folowing example:

router.on({
  about: {
    as: 'about',
    uses: _ => {
      document.getElementById('main').innerHTML = About
    },
    hooks: {
      before: function(done, params) {
        console.log('before', router)
        document.querySelector('a[href=' + router.lastRouteResolved().name + ']').className = 'active'
        done()
      },
      leave: _ => {
        console.log('leave', router)
        document.querySelector('a[href=' + router.lastRouteResolved().name + ']').className = ''
      }
    }
  },
  astronaut: {
    as: 'astronaut',
    uses: _ => {
      document.getElementById('main').innerHTML = Astronaut
    },
    hooks: {
      before: _ => {
        document.querySelector('a[href=' + router.lastRouteResolved().name + ']').className = 'active'
        done()
      },
      leave: _ => {
        document.querySelector('a[href=' + router.lastRouteResolved().name + ']').className = ''
      }
    }
  },
  second: {
    as: 'second',
    uses: _ => {
      document.getElementById('main').innerHTML = Errorpage
    },
    hooks: {
      before: _ => {
        document.querySelector('a[href=' + router.lastRouteResolved().name + ']').className = 'active'
        done()
      },
      leave: _ => {
        document.querySelector('a[href=' + router.lastRouteResolved().name + ']').className = ''
      }
    }
  }
})

by the way, with this snippet i set a css class which underlines the current link. Maybe someone can use this snippet.

That could be done much more efficient, but anyway … you can see the syntax 😃

[benjwarner]

Extending on solution given by @op3d

Below is the same solution code, but with the params and queryString available:

router.on({
  about: {
    as: 'about',
    uses: function (params, queryString) {
      document.getElementById('main').innerHTML = About
    },
    hooks: {
      before: function(done, params) {
        console.log('before', router)
        document.querySelector('a[href=' + router.lastRouteResolved().name + ']').className = 'active'
        done()
      },
      leave: _ => {
        console.log('leave', router)
        document.querySelector('a[href=' + router.lastRouteResolved().name + ']').className = ''
      }
    }
  },
  astronaut: {
    as: 'astronaut',
    uses: function (params, queryString) {
      document.getElementById('main').innerHTML = Astronaut
    },
    hooks: {
      before: _ => {
        document.querySelector('a[href=' + router.lastRouteResolved().name + ']').className = 'active'
        done()
      },
      leave: _ => {
        document.querySelector('a[href=' + router.lastRouteResolved().name + ']').className = ''
      }
    }
  },
  second: {
    as: 'second',
    uses: function (params, queryString) {
      document.getElementById('main').innerHTML = Errorpage
    },
    hooks: {
      before: _ => {
        document.querySelector('a[href=' + router.lastRouteResolved().name + ']').className = 'active'
        done()
      },
      leave: _ => {
        document.querySelector('a[href=' + router.lastRouteResolved().name + ']').className = ''
      }
    }
  }
})