[Vue] Get up and running with vue-router

Posted 2020-08-30 Answer1215

How do we set up a simple app with its own routes with their own components in Vue?

 

Install:

npm i --save vue-router

 

Define routers:

import Vue from ‘vue‘
import Router from ‘vue-router‘

Vue.use(Router)

import Armenian from ‘../components/Armenian.vue‘
import Chinese from ‘../components/Chinese.vue‘
import Greek from ‘../components/Greek.vue‘

export default new Router({
  mode: ‘history‘,
  routes: [{
    path: ‘/armenian‘,
    component: Armenian
  }, {
    path: ‘/chinese‘,
    component: Chinese
  }, {
    path: ‘/greek‘,
    component: Greek
  }]
})

 

Navgiation:

<template>
  <div id="app">
    <header>
      <router-link to="/" exact>Lorem Ipsum in different languages</router-link>
    </header>
    <nav>
      <ul>
        <li>
          <router-link to="/armenian">Armenian</router-link>
        </li>
        <li>
          <router-link to="/chinese">Chinese</router-link>
        </li>
        <li>
          <router-link to="/greek">Greek</router-link>
        </li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: ‘App‘
  }
</script>

<style>
  .router-link-active {
    color: turquoise
  }
</style>