A presentation at Chicago VueJS Meetup in in Chicago, IL, USA by Divya
Navigating Vue Router
Divya Sasidharan Developer Advocate @shortdiv
Why
Routing is essentially the way you navigate through a website or web-application.
Client Side Routing
Client Side Routing vs Server Side Routing
Server Side Routing Client Side Routing ! ! ! Fast time to first paint Fast Routing Optimized for SEO Smooth Transitions " Full page refresh " Slower routing " ! longer time to first paint " Not SEO friendly
SPA = Client Side Routing
What
Vue Router 🚦
. ├── src/ ├── … ├── router.js ├── … ├── … └── package.json
. ├── src/ ├── … ├── router/ ├── index.js ├── routes.js ├── … ├── … └── package.json
How
export default [ { path: "/", name: "dashboard", component: Dashboard }, ] src/router/routes.js
import Vue from "vue"; import Router from "vue-router"; import routes from "./routes"; Vue.use(Router); const router = new Router({ routes, mode: "history" }); export default router; src/router/index.js
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; new Vue({ router, render: h %=> h(App) }).$mount("#app"); src/main.js
When
• Nested route/view mapping • Modular, component-based router configuration • Route params, query, wildcards • View transition effects powered by Vue.js' transition system • Fine-grained navigation control • Links with automatic active CSS classes • HTML5 history mode or hash mode, with auto-fallback in IE9 • Customizable Scroll Behavior
• Nested route/view mapping • Modular, component-based router configuration • Route params, query, wildcards • View transition effects powered by Vue.js' transition system • Fine-grained navigation control • Links with automatic active CSS classes • HTML5 history mode or hash mode, with auto-fallback in IE9 • Customizable Scroll Behavior
Navigation Guards
Demo
Navigation Guards Global Per Route In Component
Global Hooks … const router = new Router({ routes, mode: "history" }); router.beforeEach((to, from, next) %=> { %// … } router.beforeResolve((to, from, next) %=> { %// … } router.afterEach((to, from, next) %=> { %// … } src/router/index.js
Per Guard Hooks export default [ { path: “/", … beforeEnter(to, from, next) { // … }, beforeResolve(to, from, next) { // … } afterEach(to, from, next) { // … } }, src/router/routes.js ]
In Component Hooks export default { name: “Dashboard”, … beforeRouteEnter(to, from, next) { // … }, beforeRouteUpdate(to, from, next) { // … }, beforeRouteLeave(to, from, next) { // … } } src/router/routes.js
Thanks! @shortdiv https://github.com/shortdiv/gotruejs-in-vue
for free. You
can too.