links to same component

by watchduck

HTML

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

<div id="app">
  <router-link :to="{name: 'home'}">home</router-link>
  <router-link :to="{name: 'thing', params: {id: 1}}">thing 1</router-link>
  <router-link :to="{name: 'thing', params: {id: 2}}">thing 2</router-link>
  <router-view></router-view>
</div>

TypeScript

const HomeComponent = {
	template: '<h1>Home</h1>'
};

const ThingComponent = {
	data() { return {
  	names: ['First Thing', 'Second Thing'],
  }},
  computed: {
  	id() {return this.$route.params.id},
    name() {return this.names[this.id-1]}
  },
	template: `<div>
  						<h1>Thing {{id}}</h1>
              <p>name: {{name}}</p>
             </div>`
};

const routes = [
	{path: '/', component: HomeComponent, name: 'home'},
  {path: '/thing', component: ThingComponent, name: 'thing'}
];

const router = new VueRouter({routes});

new Vue({el: '#app', router});