Vue Router

Rendering different components based on URL

Why Router is Needed

  • To maintain SPA characteristics while having different URLs

    • Rendering different components based on URL

  • Route/view mapping

Characteristics of Vue

  • Keep it small and lightweight, but allow adding necessary features!

  • That's why you need to add the router separately if you want to use it!

Install Vue Router

Standard installation

npm install vue-router

Add using vue's power

  • Run from the project root!

  • Try to add it as soon as possible after creating the project!

    • So that this message doesn't appear~

ex)

App.vue

router > index.js

The index.js inside router is like urls.py in Django!

views/ directory

  • The directory where components that will be mapped to URLs(/) go

  • The ones that will be assigned a URL~!

  • Components in views/ are imported in router/index.js!

variable routing

Building Ping - Pong

Ping.vue

Pong.vue

Last updated