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

first we will create a new vue app usign webpack

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

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 

we also need to create the 3 components of course

dahsboard.vue

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

now lets define our routes

/router/index.js

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