O'Reilly logo

The Majesty of Vue.js by Kostas Maniatis, Alex Kyriakidis

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Usage

We need to create a router instance, where shortly after, we will pass extra options:

var router = new VueRouter()

We also need to define some routes. Each route should map to a component, which means that we are going to create routes for the *.vue files we used all along in our examples.

The main method to define route mappings for the router is router.map(routeMap):

src/main.js:

router.map({
  '/': {
    component: require('./components/Hello.vue')
  },
  '/login': {
    component: require('./components/Login.vue')
  }
})

Inside the method we have defined two routes:

  • When http://localhost:3000/ is met (or any port you might have), the default Hello.vue will be rendered
  • When http://localhost:3000/login is met, Login.vue will be rendered

Note

We are using require() ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required