Navigating Vue Router

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