Vue.js Routing
https://unsplash.com/photos/N2HtDFA-AgM
The vue-router
vue's way of doing SPA navigation
Getting started
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/4763331/Screen_Shot_2018-04-02_at_8.42.40_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/4763334/Screen_Shot_2018-04-02_at_8.43.19_PM.png)
Dynamic routes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/4763341/Screen_Shot_2018-04-02_at_8.45.33_PM.png)
props & route components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/4763361/Screen_Shot_2018-04-02_at_8.52.01_PM.png)
Programatic navigation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/4768883/Screen_Shot_2018-04-04_at_9.05.55_AM.png)
Global Guards
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/4763377/Screen_Shot_2018-04-02_at_8.57.27_PM.png)
-
to: Route: the target Route Object being navigated to.
-
from: Route: the current route being navigated away from.
-
next: Function: this function must be called to resolve the hook.
next(), next(false),next('/'), next({ path: '/' }), next(error)(transfer to router.onError())
In-Component Guards
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/4763405/Screen_Shot_2018-04-02_at_9.04.55_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/4763413/Screen_Shot_2018-04-02_at_9.05.52_PM.png)