Vue.js Router: Building Single Page Applications

Vue Router is the official router for Vue.js. Essential for building single-page applications.

Setup

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

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/user/:id', component: User }
];

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

new Vue({ router }).$mount('#app');

Navigation

<!-- Template -->
<router-link to="/">Home</router-link>
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
<router-view></router-view>

<!-- Programmatic -->
this.$router.push('/about');
this.$router.push({ name: 'user', params: { id: 123 }});

Route Guards

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

References

• Vue Router Documentation