Vue Router

#vue.js

In develop a single-page application in Vue.js, the browser doesn’t make a request to the server on every URL change. The browser only makes a request to server for the initial page load and when the URL change (example http://yoursite.com to http://yoursite.com/about) it’s up to Vue to determine what content should be displayed.

The router instance

import App from 'App.vue'
import router from './router/'
 
const app = new Vue({
  el: '#app',
  // introduction the router instance
  router: router,
  render: (h) => h(App),
})

The router instance is created by using the Vue Router constructor and passing in an object that contains the key/value pairs for the path and component that should render for that particular path.

import Home from 'Home.vue'
import About from 'About.vue'
 
const router = new Router({
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/about',
      component: About,
    },
  ],
})

router-view

The router-view component renders a specified component based on the app’s location as dictated in the router instance.

<div id="app">
  <router-view />
</div>

The router-link component allows the users change the location of the browser without reloading the browser.

<div id="app">
  <router-view />
  <router-link to="/about">About</router-link>
</div>