首页 > 代码库 > [Vue] Get up and running with vue-router

[Vue] Get up and running with vue-router

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 vueimport Router from vue-routerVue.use(Router)import Armenian from ../components/Armenian.vueimport Chinese from ../components/Chinese.vueimport Greek from ../components/Greek.vueexport 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>

 

[Vue] Get up and running with vue-router