In this post we will take a look at using Vue Router

first we will create a new vue app usign webpack

vue init webpack vuerouter

after the project is created, navigate to the folder and run 

npm run dev

first we will create a simple main screen with 3 different routes

  • Dashboard Page
  • Customers Page
  • Users Page

lets modify the sample code as follows

in App.vue we will add three router links to our three views 

  <div id="app">
    <img src="./assets/logo.png">

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

    <p>Main Router View</p>


we also need to create the 3 components of course



export default {

and then create customers.vue and users.vue the same just chaneg the text in the template

now lets define our routes


import Vue from 'vue'
import Router from 'vue-router'
import DashBoard from '@/components/DashBoard'
import Users from '@/components/users'
import Customers from '@/components/customers'


export default new Router({
  routes: [
      path: '/',
      name: 'dashboard',
      component: DashBoard
      path: '/users',
      name: 'users',
      component: Users
      path: '/customers',
      name: 'customers',
      component: Customers

running this app will show as a main page showing the Dashboard page by default

it will also have the 3 links at the top and when clicking one of the links will navigate to the route and show the page in the main router view

in the next part of the router series we will take a look at dynamic routes

Michael Salzlechner is the CEO of StarZen Technologies, Inc.

He was part of the Windows Team at Data Access Worldwide that created the DataFlex for Windows Product before joining StarZen Technologies. StarZen Technologies provides consulting services as well as custom Application development and third party products