How to use components and router in Vue 2?

Question

Vue.js

I'm trying to create 2 pages: main and list of clients.
I connect the view and the view router. I'm trying like this:

<div id="app">
  <p>
      <router-link to="/clients">Clients</router-link>
 	</p>

  <router-view></router-view>
</div>

<template id="clients-template">
  <h1>Clients</h1>
        <ul>
           <li v-for="client in clients">{{  client.name  }}</li>
        </ul>
</template>

<script>

const router = new VueRouter({
    mode: 'history',
    routes: [
      {
        path: '/clients',
        component: {
          template: '#clients'
        }
      },
    ]
  });

new Vue({
    el : '#app',
    data : {
      clients : [{name:"Client 1"},{name:"Client 2"},{name:"Client 3"}],
    }
    	router : router
  });
</script>

Confused. How to process clients from Vue inside the template in this case?

Answer 1

You can make a 'clients' component via 'Vue.component' with your template and pass data into it or initialize the data directly in it.