Vue.js

The Practical Guide

@N_Tepluhina

 What will we learn today? 

- Vue Router basics

- Lazy-loading components

- Dynamic routes

- Navigation guards

@N_Tepluhina

Adding a router to the project

@N_Tepluhina

On project creation with Vue CLI

@N_Tepluhina

With plugin on CLI-based project

@N_Tepluhina

Manually

 

yarn add vue-router
## OR
npm install vue router
// main.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

@N_Tepluhina

Define application routes

 

// routes.js

import Home from './views/Home.vue'
import ReleaseList from './views/ReleaseList.vue'

export default [
  { path: '/', component: Home },
  { path: '/releases', component: ReleaseList },
]

@N_Tepluhina

Create router instance

 

// main.js

import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
  routes,
})

@N_Tepluhina

Create router instance

 

// main.js

import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
  routes,
})

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

@N_Tepluhina

Render a view in application

 

<!-- App.vue -->

<section class="container mx-auto">
  <router-view></router-view>
</section>

@N_Tepluhina

History mode

 

 

Ewww

// main.js

const router = new VueRouter({
  routes,
  mode: 'history'
})

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

@N_Tepluhina

Navigation with links

 

 

<router-link to="/">Home</router-link>

<router-link to="/releases">Releases</router-link>

@N_Tepluhina

Dynamic routes

 

 

// routes.js

export default [
  { path: '/', component: Home, name: 'home' },
  { path: '/releases', component: ReleaseList, name: 'release-list' },
    {
    path: '/releases/:id',
    component: Release,
    name: 'release',
  },
]

Dynamic segment, available as $route.params.id

@N_Tepluhina

Dynamic routes

 

 

<router-link
  :to="{ name: 'release', params: { id } }"
>

@N_Tepluhina

Passing props to route

 

 

// routes.js

  {
    path: '/releases/:id',
    component: Release,
    name: 'release',
    props: true,
  },

@N_Tepluhina

Lazy loading routes

 

 

// routes.js

export default [
  { path: '/', component: () => import('./views/Home.vue'), name: 'home' },
  {
    path: '/releases',
    component: () => import('./views/ReleaseList.vue'),
    name: 'release-list',
  },
  {
    path: '/releases/:id',
    component: () => import('./views/Release.vue'),
    name: 'release',
    props: true,
  },
]

@N_Tepluhina

Global router guards

 

 

// main.js

const router = new VueRouter({
  routes,
  mode: 'history',
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = Cookies.get('logged_in')

  if (to.name !== 'login' && !isAuthenticated)
    next({ name: 'login' })
  else next()
})

@N_Tepluhina

Per-route guards

 

 

//routes.js

{
  path: '/login',
  component: () => import('./views/Login.vue'),
  name: 'login',
  beforeEnter: (to, from, next) => {
    // ...
  }
},

@N_Tepluhina

In-component guards and keyed views

 

 

// Release.vue

{
  // data, methods etc
  beforeRouteEnter() {
    console.log(`Tracking event sent for release ${this.id}`)
  }
}

@N_Tepluhina

Handling 404

 

 

//routes.js

// Make sure this route is last!
{
  path: '*',
  component: () => import('./views/NotFound.vue'),
},

@N_Tepluhina

Practice!

- Clone an exercise repository

- On App.vue, replace Episodes with router view and add links to navbar

- Add a dynamic route for a single Character view

- Create routes for Episodes and Characters components

- Implement one global router guard

- Handle 404s

Q & A

@N_Tepluhina

Vue.js: The Practical Guide

By Natalia Tepluhina

Vue.js: The Practical Guide

Smashing Workshop - Day 3

  • 102

More from Natalia Tepluhina