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
<template>
<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>
<router-view/>
</div>
</template>
we also need to create the 3 components of course
dahsboard.vue
<template>
<div>DASHBOARD</div>
</template>
<script>
export default {
}
</script>
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
import Vue from 'vue'
import Router from 'vue-router'
import DashBoard from '@/components/DashBoard'
import Users from '@/components/users'
import Customers from '@/components/customers'
Vue.use(Router)
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
