Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Vue Router Patterns Chapter 20

To then initialize the router, we can then create a new VueRouter and pass along the

routes, as follows:

const router = new VueRouter({

// This is ES2015+ shorthand for routes: routes

routes,

});

Finally, let's export the router so that it can be used inside our main Vue instance:

export default router;

Inside main.js, let's import the router and add it to the instance, as shown:

import Vue from 'vue';

import App from './App.vue';

import router from './router';

new Vue({

el: '#app',

router,

render: h => h(App),

});

Creating the UserList route

The first section of our application will be a home page that displays a list of users from an

API. We've used this example in the past, so you should be familiar with the steps

involved. Let's create a new component under src/components/user named

UserList.vue.

The component will look something like this:

<template>

<ul>

<li v-for="user in users" :key="user.id">

{{user.name}}

</li>

</ul>

</template>

<script>

export default {

data() {

return {

users: [