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 defaultHello.vue
will be renderedWhen
http://localhost:3000/login
is met,Login.vue
will be rendered
Note
We are using require()
because these components are not imported in this file. Alternatively you can import those you need and then do '/foo': {component: Foo }
.
We need an outlet for the router. The guide states that...