SOURCE

const Home = {
	template: '<div>This is Home</div>'
}

const Foo = {
	template: '<div>This is Foo</div>'
}

const Bar = {
	template: '<div>This is Bar {{ $route.params.id }}</div>'
}

const router = new VueRouter({
	routes: [
		{
			path: '/',
			name: 'home',
			component: Home
		},
		{
			path: '/foo',
			name: 'foo',
			component: Foo
		},
		{
			path: '/bar/:id',
			name: 'bar',
			component: Bar
		}
	]
})

new Vue({
	router
}).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id='app'>
	<h1>Named Routes</h1>
	<p>Current route name: {{ $route.name }}</p>
	<ul>
		<li><router-link v-bind:to='{name: "home"}'>home</router-link></li>
		<li><router-link v-bind:to='{name: "foo"}'>foo</router-link></li>
		<li><router-link v-bind:to='{name: "bar", params: {id: 123}}'>bar</router-link></li>
	</ul>
	<router-view></router-view>
</div>