Как в Vue 2 использовать компоненты и роутер?

Question

[WebDev]

Пытаюсь создать 2 страницы: главную и список клиентов.
Подключаю вью и вью-роутер. Пытаюсь так:

<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>

Запутался. Как в этом случае обрабатывать клиентов из Vue внутри шаблона?

Answer 1

[Evgeny Kulakov]

Можно сделать компонент 'clients' через 'Vue.component' с вашим шаблоном и передать в него данные или инициализировать данные непосредственно в нем.